Bootstrap 3.0 响应式菜单栏切换问题..当增加菜单栏中的内容时

Question

嗨，我在菜单栏中遇到了非常严重的问题。我正在使用引导程序 3。缩小浏览器窗口的大小时，菜单栏无法正确切换。我有 9 个带有 png 图标的菜单项。

我把我的代码放在这里

<div class="navbar-collapse collapse navbar-ex1-collapse">
            <!--<div class="collapse navbar-collapse">--><!--temporary added-->

            <ul class="nav navbar-nav">

              <li><a href="#"><span><img src="images/todoBtn.png"></span>&nbsp;&nbsp;ToDo</a></li>
              <li><a href="#"><span><img src="images/dineBtn.png"></span>&nbsp;&nbsp;Dining</a></li>
              <li><a href="#"><span><img src="images/shopBtn.png"></span>&nbsp;&nbsp;Shooping</a></li>
              <li><a href="#"><span><img src="images/todoBtn.png"></span>&nbsp;&nbsp;NightLife</a></li>
              <li><a href="#"><span><img src="images/fashionBtn.png"></span>&nbsp;&nbsp;Fashion</a></li>
              <li><a href="#"><span><img src="images/bodyBtn.png"></span>&nbsp;&nbsp;Body&Mind </a></li>
              <li><a href="#"><span><img src="images/eventBtn.png"></span>&nbsp;&nbsp;Events</a></li>
              <li><a href="#"><span><img src="images/exclusiveBtn.png"></span>&nbsp;&nbsp;Exclusive</a></li>
              <li><a href="#"><span><img src="images/tarvelBtn.png"></span>&nbsp;&nbsp;Travel</a></li>
        </ul>
        <!--</div>--><!--new div-->
        </div>

再次:: 菜单无法正确切换，因为我在 menue 中的内容正在增加，请帮助我如何在 bootsrap 3.0 中进行管理。

请帮帮我这是对你们所有人的请求

谢谢大家

Answer 1

这与您的内容增加无关，引导程序中的导航栏周围有您错过的 <nav></nav> 标签以及用于切换较小视口的按钮，这是带有菜单链接的完整导航栏：

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
        <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="navbar-collapse collapse navbar-ex1-collapse" id="navbar1">
            <!--<div class="collapse navbar-collapse">--><!--temporary added-->

            <ul class="nav navbar-nav">

              <li><a href="#"><span><img src="images/todoBtn.png"></span>&nbsp;&nbsp;ToDo</a></li>
              <li><a href="#"><span><img src="images/dineBtn.png"></span>&nbsp;&nbsp;Dining</a></li>
              <li><a href="#"><span><img src="images/shopBtn.png"></span>&nbsp;&nbsp;Shooping</a></li>
              <li><a href="#"><span><img src="images/todoBtn.png"></span>&nbsp;&nbsp;NightLife</a></li>
              <li><a href="#"><span><img src="images/fashionBtn.png"></span>&nbsp;&nbsp;Fashion</a></li>
              <li><a href="#"><span><img src="images/bodyBtn.png"></span>&nbsp;&nbsp;Body&Mind </a></li>
              <li><a href="#"><span><img src="images/eventBtn.png"></span>&nbsp;&nbsp;Events</a></li>
              <li><a href="#"><span><img src="images/exclusiveBtn.png"></span>&nbsp;&nbsp;Exclusive</a></li>
              <li><a href="#"><span><img src="images/tarvelBtn.png"></span>&nbsp;&nbsp;Travel</a></li>
        </ul>
        <!--</div>--><!--new div-->
   </div>
</nav>

DEMO