Question

现在我有2个导航栏。上部导航栏有一个下拉按钮，没有正确显示。

在下图中，我按了按钮＆＃34; Mijn werk＆＃34;这是下拉列表。如您所见，没有下拉列表。

如果我查看其他页面（没有第二个导航栏），您可以看到下拉列表（请参阅下面的图片）

我使用以下代码创建了导航栏：

    <nav class = "navbar navbar-inverse navbar-static-top" role = "navigation">
        <div class = "container navbar-inner">
            <a href = "index.php" class = "navbar-brand">Wesley</a>

            <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
            </button>

            <div class = "collapse navbar-collapse navHeaderCollapse">
                <ul class = "nav navbar-nav navbar-right">
                    <li class = "active"><a href = "index.php">Home</a></li>
                    <li><a href = "about.php">About</a></li>

                    <li class = "dropdown" role = "menu">
                        <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">Mijn werk <b class = "caret"></b></a>
                        <ul class = "dropdown-menu">
                            <li><a href = "#">File Browser</a></li> 
                            <li><a href = "#">Gastenboek</a></li>
                        </ul>
                    </li>

                    <li><a href = "#contact" data-toggle = "modal">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <nav class = "navbar navbar-default navbar-static-top" role = "navigation">
        <div class = "container navbar-inner">
            <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderLoginCollapse">
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
                <span class = "icon-bar"></span>
            </button>

            <div class = "collapse navbar-collapse navHeaderLoginCollapse">
                <form class = "nav navbar-form navbar-right" id = "login" method = "post" action = "login.php">
                    <div class = "form-group">
                        <input type = "text" class = "form-control" placeholder = "Gebruikersnaam" name = "gebruikersnaam">
                    </div>

                    <div class = "form-group">
                        <input type = "password" class = "form-control" placeholder = "Wachtwoord" name = "wachtwoord">
                    </div>

                    <div class = "form-group"><button type = "submit" class = "btn btn-primary">Aanmelden</button></div>

                    <div class = "form-group"><span class = "navbar-text"><a href = "register.php">Register</a></span></div>
                </form>
            </div>
        </div>
    </nav>

我的问题：如何在第二个导航栏上方显示下拉列表？

Answer 1

你可以给第二个导航栏一个id（即：＆＃34; nav2＆＃34;）然后像这样更改它的z顺序..

#nav2 {
 z-index:-1;
}

<强> Demo

Bootstrap Double导航栏，带下拉列表

1 个答案: