Html 当我重新调整浏览器的大小时，为什么navbar突然出现

我的

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>  

ACME-纽约

下面是我一直在工作的jsbin。当我调整大小时，为什么AccountName/徽标会掉下来

---

因为您设置了50%的宽度，仅此而已。如果需要，设置固定宽度或最小宽度。例如最小宽度：420px

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

低于某个阈值时，

li

元素从

float:left

变为

position:relative；显示：块

在媒体查询部分查看引导css的非精简版本

---

这是需要的，因为在较低的屏幕宽度下，您无法容纳整个菜单块，因此它会垂直。如果希望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>

class=“col-sm-12 col-md-12 col-xs-12 col-lg-12”

可以大大简化为

class=“col-xs-12”

.navbar li{
    float: left;
}