2016-09-07 5 views
0

У меня проблема с системой сетки бутстрапа. Я создал свой собственный навигационный div в верхней части страницы. Все это отлично подходит для больших размеров экрана. Когда я уменьшаю размер экрана до xs, он ломается. Вот что я собираюсь сделать:Столбцы сетки бутстрапа под eachother

| logo | link 1 | link 2 | link 3 | link 4| 

Вышеупомянутое предназначено для всех экранов, кроме xs. Для хз я получаю:

| logo | link 1 | 
|  | link 2 | 
|  | link 3 | 
|  | link 4 | 

И то, что я хочу это:

| logo | 
| link 1 | 
| link 2 | 
| link 3 | 
| link 4 | 

Вот мой код:

<div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2"> 
    <div class="row"> 
     <div class="col-xs-12 col-md-6"> 
      <a href="/"><h1 class="logo">LOGO</h1></a> 
     </div> 
    </div> 
    <div class="row navbar navigation"> 
     <div class="col-xs-12 col-md-6 navLinks"> 
      <div class="col-xs-12 col-md-3 navLink"> 
       <h4 class="links"><a href="videos.html">LINK 1</a></h4> 
      </div> 
      <div class="col-xs-12 col-md-3 navLink"> 
       <h4 class="links"><a href="photos.html">LINK 2</a></h4> 
      </div> 
      <div class="col-xs-12 col-md-3 navLink"> 
       <h4 class="links"><a href="about-us.html">LINK 3</a></h4> 
      </div> 
      <div class="col-xs-12 col-md-3 navLink"> 
       <h4 class="links" id="contactLink"><a>LINK 4</a></h4> 
      </div> 
     </div> 
    </div> 
</div> 

ответ

1

нагрузки как один полный ряд удалить. Класс строка из класса сНа = строка Navbar

Удалите ДИВЫ строки закрывающего тег для строк логотипа раздела и поместить его в конце

+0

Это работал, но там также была ошибка в CSS. У меня был дисплей: flex; –

Смежные вопросы