Navigationsleiste Layout

Question

Ich habe Probleme, meine Navigationsleiste wie das Foto unten mit Bootstrap aussehen.

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

Wenn die Bildschirmauflösung wurde kleiner die Bilder auf der Oberseite und Unterseite der aktuellen Navigations-Links statt schrumpfen als ein ganzes Stück gehen. Gibt es ein besseres Layout, um dies zu erreichen?

Answer 1

Um das Layout auf kleineren Bildschirmen zu halten, müssen Sie -md- in Ihren col-*-* Klassen durch -xs- ersetzen. Ich nehme an, dass Sie Bootstrap v3 verwenden.

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

Für Bootstrap v4, dann würden Sie die -md- alltogether entfernen müssen:

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