Question

我第一次使用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>

对不起，如果我的代码很乱 - 我之前没有做太多的网络开发。我猜测它与<li>和<a>标签的某些排序有关，但我无法解决。

谢谢。

Answer 1

您的代码工作正常，只需在此处查看预览。 see the output 我只在标签中添加了一个navbar-default类。

<!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 navbar-toggle不会自动填充

1 个答案: