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

Question

我的 navbar 中有一个 logo 和 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% 的宽度，仅此而已。如果需要，设置固定宽度或最小宽度。例如最小宽度:420px；