Question

Hello Bootstrap用户

我想知道你是否可以帮助我。请看屏幕截图

enter image description here

我的两个导航条（取自Bootstrap网站的样本）不幸的是，当II向菜单中添加一些额外的项目时菜单不会崩溃（请参阅上面的链接）此问题会影响所有设备/ browsers。

有谁知道问题可能是什么？

请参阅下面的代码（抱歉格式化）切换导航友好名称家一般第2组链接1

Link2

Link3

第2组

Link 4

Link 5

Link 6

第3组

Link 7

第4组

链接8 42

链接9 220

Link 10

  <ul class='nav navbar-nav navbar-right'>
  <li><a href='../navbar-fixed-top/'><span class='glyphicon glyphicon-info-sign'></span> Help</a></li>
  <li class='dropdown'>
    <a href='#' class='dropdown-toggle' data-toggle='dropdown'><span class='glyphicon glyphicon-wrench'></span> Settings <b class='caret'></b></a>
    <ul class='dropdown-menu'>
      <li><a href='#'><span class='glyphicon glyphicon-envelope'></span> Notification</a></li>
      <li><a href='#'><span class='glyphicon glyphicon-tower'></span> Members</a></li>
      <li><a href='#'><span class='glyphicon glyphicon-plus'></span> New User</a></li>';
    </ul>
  </li>
  <li class='dropdown'>
    <a href='#' class='dropdown-toggle' data-toggle='dropdown'><span class='glyphicon glyphicon-user'></span> Administrator<b class='caret'></b></a>
    <ul class='dropdown-menu'>
        <li><a href='#'><span class='glyphicon glyphicon-tower'></span> Profile</a></li>';
        <li><a href='#'><span class='glyphicon glyphicon-compressed'></span> Change Password</a></li>';
        <li class='divider'></li><li><a href='logout.php'><span class='glyphicon glyphicon-log-in'></span> Log Out</a></li>';
     </ul>
  </li>
  </ul>
</div>

亲切的问候;

pi4r0n

Answer 1

<div class="container">
    <div class="navbar navbar-default">
        <div class="navbar-header"> <a class="navbar-brand" href="#">Bootstrap 3</a>

        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">General <b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="#">link </a>
                        </li>
                        <li><a href="#">link </a>
                        </li>
                        <li><a href="#">link </a>
                        </li>
                        <li><a href="#">link </a>
                        </li>
                        <li><a href="#">link </a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Orders <b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="#">link </a>
                        </li>
                        <li><a href="#">link </a>
                        </li>
                        <li><a href="#">link </a>
                        </li>
                        <li><a href="#">link </a>
                        </li>
                        <li><a href="#">link </a>
                        </li>
                    </ul>
                </li>
                <li><a href="http://getbootstrap.com/css">Time Table</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="http://getbootstrap.com/customize">Customize</a></li>
                <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">link </a>
                        </li>
                        <li><a href="#">link </a>
                        </li>
                        <li><a href="#">link </a>
                        </li>
                        <li><a href="#">link </a>
                        </li>
                        <li><a href="#">link </a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Administrator <b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="#">link </a>
                        </li>
                        <li><a href="#">link </a>
                        </li>
                        <li><a href="#">link </a>
                        </li>
                        <li><a href="#">link </a>
                        </li>
                        <li><a href="#">link </a>
                        </li>
                    </ul>
                </li>

            </ul>
        </div>
    </div>
    <div class="jumbotron">
         <h1>Twitter Bootstrap 3.0</h1>
    </div>
</div>

DEMO Here

Answer 2

我们在the navbar docs ...

中明确涵盖了此内容

溢出内容

由于Bootstrap不知道导航栏中的内容需要多少空间，因此您可能会遇到内容包装到第二行的问题。要解决此问题，您可以：


减少导航栏项目的数量或宽度。

使用自适应实用程序类隐藏某些屏幕尺寸的某些导航栏项目。

更改导航栏在折叠模式和水平模式之间切换的点。自定义@grid-float-breakpoint变量或添加您自己的媒体查询。

Bootstrap - 两个导航栏没有正确折叠

2 个答案:

溢出内容