Html 引导导航栏切换赢得'；t自动填充_Html_Twitter Bootstrap

Html 引导导航栏切换赢得'；t自动填充

html twitter-bootstrap

Html 引导导航栏切换赢得'；t自动填充,html,twitter-bootstrap,Html,Twitter Bootstrap,我第一次使用bootstrap，并且在网上看到了一些关于切换菜单的例子，这些菜单能够自动填充非切换版本中的所有链接。我试图在下面这样做，但由于某种原因，我的似乎不起作用我也找遍了所有地方，但在其他帖子或网站上找不到任何能帮助我的答案任何帮助都将不胜感激 <nav class="navbar"> <div class="container-fluid"> <div class="navbar-header"> &l

我第一次使用bootstrap，并且在网上看到了一些关于切换菜单的例子，这些菜单能够自动填充非切换版本中的所有链接。我试图在下面这样做，但由于某种原因，我的似乎不起作用

我也找遍了所有地方，但在其他帖子或网站上找不到任何能帮助我的答案

任何帮助都将不胜感激

<nav class="navbar">
    <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>

        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="navi nav navbar-nav">
                <li class="dropdowni dropdown">
                    <a class="dropdowni dropdown-toggle" id="nobackground" data-toggle="dropdown" href="#">Option 1</a>
                    <ul class="dropdowni dropdown-menu">
                        <a href="#"><li>Option 1-1</li></a>
                        <a href="#"><li>Option 1-2</li></a>
                        <a href="#"><li>Option 1-3</li></a>
                        <a href="#"><li>Option 1-4</li></a>
                        <a href="#"><li>Option 1-5</li></a>
                    </ul>
                </li>
                <li id="grey">//</li>
                <li><a id="nobackground" href="#">Option 2</a></li>
                <li id="grey">//</li>
                <li><a id="nobackground" href="#">Option 3</a></li>
                <li id="grey">//</li>
                <li><a id="nobackground" href="#">Option 4</a></li>
            </ul>
        </div>
   </div>
</nav>


切换导航





//

//

//

如果我的代码很混乱，我很抱歉-我以前没有做过很多web开发。我猜这与

和

标记的排序有关，但我无法计算出来

谢谢。

您好，您的代码运行得很好，请参见此处的预览。我只在标记中添加了一个navbar默认类

<!DOCTYPE html>
<html>

<head>
    <script data-require="jquery@2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script data-require="bootstrap.js@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> </head>

<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="navi nav navbar-nav">
                    <li class="dropdowni dropdown"> <a class="dropdowni dropdown-toggle" id="nobackground" data-toggle="dropdown" href="#">Option 1</a>
                        <ul class="dropdowni dropdown-menu">
                            <a href="#">
                                <li>Option 1-1</li>
                            </a>
                            <a href="#">
                                <li>Option 1-2</li>
                            </a>
                            <a href="#">
                                <li>Option 1-3</li>
                            </a>
                            <a href="#">
                                <li>Option 1-4</li>
                            </a>
                            <a href="#">
                                <li>Option 1-5</li>
                            </a>
                        </ul>
                    </li>
                    <li id="grey">//</li>
                    <li> <a id="nobackground" href="#">Option 2</a> </li>
                    <li id="grey">//</li>
                    <li> <a id="nobackground" href="#">Option 3</a> </li>
                    <li id="grey">//</li>
                    <li> <a id="nobackground" href="#">Option 4</a> </li>
                </ul>
            </div>
        </div>
    </nav>
</body>

</html>


切换导航





//

//

//

看一看引导文档：我已经做了，不幸的是它对我没有帮助-也许我只是不理解它，因为你是否包括了

Bootstrap.js

？@fierynot，你包括引导css和javascript了吗？是的，我有，这两个，在引导jsHi之前用JQuery按照正确的顺序，谢谢，它正在工作！它一定是我的“navi”css类，因为某种原因——当我删除它时，它可以工作，但格式很差。再次感谢你！