Bootstrap navbar с изображением на две строки

Question

Пожалуйста, помогите. мне нужно сделать такую ​​же конструкцию:

|   | Menu item1 | Menu item2  
| Image |____________________________________________________________ 
|   | Some static text 
__________________________________________________________________________ 

С самозагрузки класса NavBar. Я не могу понять, как разделить изображение на две строки без лишней функциональности.

Answer 1

Вы можете сделать это с некоторыми Flexbox и медиа запросов DEMO

@media(min-width: 768px) { 
    .two-rows-nav { 
    display: flex; 
    flex-direction: column; 
    } 
} 

Answer 2

Если я понимаю, что вы пытаетесь сделать, вы хотите две строки с тремя колонками, где элемент в первом столбце первая строка вписывается в обе строки. Лучший способ сделать это - это вложение. например, у вас есть строка с двумя столбцами (col-md-3 и col-md-9). В первом столбце (col-md-3) у вас будет изображение. Во втором столбце (col-md-9) у вас будет строка со статическим текстом внизу. Иллюстрация:

---

Image  | First | nested | row 
(col-md-3)| --------------------- 
      | Text 
      | --------------------- 

Пример кода:

<div class="row"> 
    <!-- The first column where the image will be --> 
    <div class="col-md-3"> 
    <img src="your-img.jpg" alt="img"> 
    </div> 

    <!-- The second column where the row and content will be nested --> 

    <div class="col-md-9"> 

    <!-- Nested row --> 
    <div class="row"> 

     <div class="col-md-6">Home</div> 
     <div class="col-md-6">About</div> 

    </div> 

    <!-- Content --> 
    This is where your text would go. 
    </div> 
</div> 

Некоторые подробнее: http://getbootstrap.com/css/#grid-nesting