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

Posted 2023-02-16

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

【英文标题】：Bootstrap 3.0 Responsive Menue Bar toggling issues..when increase content in menue bar

【发布时间】：2014-05-26 09:12:11

【问题描述】：

嗨，我在菜单栏中遇到了非常严重的问题。我正在使用引导程序 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 中进行管理。

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

谢谢大家

【参考方案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

【讨论】：

我有那个代码，但这个代码的问题是这个菜单栏浮动在左侧，右侧有空白空间我想制作每个菜单项都相等的大型菜单栏宽度和所有菜单项占据所有 宽度意味着不留空白

@kashifkhan 所以你需要它居中，两边都没有空间吗？

是的，如果有人有示例代码必须与我分享，我希望它两边都是完整的

你知道 Bootstrap 有合适的第三方 megamenu 插件吗？

不，我不知道如果你有任何示例链接，请与我分享