導航欄佈局

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>