为什么当我重新调整浏览器大小时导航条会中断

Question

我的navbar中有一个logo and Account Name，它在桌面和更大的设备中工作得很好。当我调整到平板电脑或手机分辨率时，它就坏了。

 <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid">        
          <div class="row">
             <div class="col-sm-6 col-md-4 col-xs-6 col-lg-4">
               <div class="navbar-header">
                 <ul class="nav navbar-nav">
                   <li><a class="navbar-brand" href="#">Something</a></li>
                  <li class="divider-vertical"></li>
                  <li><h4 style="margin-top: 15px">ACME - New York</h4></li>
                </ul>                                  
             </div>
            </div>                             
        </div>      
    </div>  

下面是我一直在工作的一个jsbin。为什么当我调整大小时，AccountName/Logo会下降?

http://jsbin.com/focataru/13

Answer 1

因为你设置了50%的宽度，仅此而已。如果需要，可以设置固定宽度或最小宽度。例如:

Answer 2

这是因为你正在使用响应式布局。

低于一定阈值时，li元素由float: left变为position: relative; display: block。

查看媒体查询部分的引导css的非缩小版本。

这是理想的，因为在低屏幕宽度下，你不能容纳整个菜单块-所以它是垂直的

Answer 3

如果您希望div跨整个行，则将其列大小设置为12:

    <div class="col-sm-12 col-md-12 col-xs-12 col-lg-12">
       <div class="navbar-header">
         <ul class="nav navbar-nav">
           <li><a href="#" class="navbar-brand">Something</a></li>
          <li class="divider-vertical"></li>
          <li><h4 style="margin-top: 15px">ACME - New York</h4></li>
         </ul>                                  
       </div>
    </div>

然后在CSS中添加以下内容以消除一些响应性:

.navbar li{
    float: left;
}