Question

我的logo and Account Name中有一个navbar，可以在桌面和大型设备上正常使用。当我重新调整平板电脑或移动分辨率时，它会中断。

 <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％的宽度而且全部都是。如果需要，设置固定宽度或最小宽度。例如min-width：420px;

Answer 2

这是因为您使用的是响应式布局。

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

查看媒体查询部分的非缩小版本的bootstrap 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;
}

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

3 个答案: