ナビゲーションバーのレイアウト

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> 

画面解像度は画像ではなく、1曲全体として縮小の実際のナビゲーションリンクの上部と下部に行くだろう小さくなりました。これを達成するためのより良いレイアウトはありますか？

Answer 1

小さい画面でレイアウトを維持するには、col-*-*クラスの-md-を-xs-に置き換える必要があります。私はあなたがブートストラップv3を使用していると仮定します。ブートストラップv4のために

<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> 

、あなたはalltogether -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>