导航栏布局

Question

我在使用引导程序让我的导航栏看起来像下面的照片时出现问题。

<nav class="navbar navbar-inverse" role="navigation"> 
    <div class="row"> 
     <div class="col-md-2"> 
      <img src="" class="img-responsive" /> 
     </div> 
     <div class="col-md-8"> 

     </div> 
     <div class="col-md-2"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-2"> 
     </div> 
     <div class="col-md-8"> 

     </div> 
     <div class="col-md-2"> 
      <img src="" class="img-responsive" /> 
     </div> 
    </div> 
</nav> 

当屏幕分辨率变小的图像会顶上去和实际的导航链接，而不是作为一个整件萎缩的底部。是否有更好的布局来实现这个目标？

Answer 1

为了让它在较小的屏幕上保持布局，您需要将col-*-*类中的-md-替换为-xs-。我假设你正在使用Bootstrap v3。

<nav class="navbar navbar-inverse" role="navigation"> 
    <div class="row"> 
     <div class="col-xs-2"> 
      <img src="" class="img-responsive" /> 
     </div> 
     <div class="col-xs-8"> 

     </div> 
     <div class="col-xs-2"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-2"> 
     </div> 
     <div class="col-xs-8"> 

     </div> 
     <div class="col-xs-2"> 
      <img src="" class="img-responsive" /> 
     </div> 
    </div> 
</nav> 

对于引导V4，你需要删除-md-总数：

<nav class="navbar navbar-inverse" role="navigation"> 
    <div class="row"> 
     <div class="col-2"> 
      <img src="" class="img-responsive" /> 
     </div> 
     <div class="col-8"> 

     </div> 
     <div class="col-2"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-2"> 
     </div> 
     <div class="col-8"> 

     </div> 
     <div class="col-2"> 
      <img src="" class="img-responsive" /> 
     </div> 
    </div> 
</nav>