Навигационная панель макета

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

Для того, чтобы сохранить расположение на меньших экранах, вам необходимо заменить -md- на классы col-*-* с помощью -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> 

Для Bootstrap v4, вы должны удалить -md- ALLtogether:

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