Bootstrap система 3 сетки отзывчивым

Я пытаюсь сделать мой профиль реагировать с использованием Bootstrap 3. Очень упрощенный пример моего профиля здесь: http://jsfiddle.net/RRfSW/5/Bootstrap система 3 сетки отзывчивым

На рабочих столах важно, что коробки 1 и 2 находятся на сверху, потому что они содержат наиболее релевантную информацию. На мобильных устройствах коробка 2 должна находиться под коробкой 1 - по той же причине. Но, как вы можете видеть, изменив размер примера, он будет ниже окна 3.

Конечно, я мог бы просто поместить коробки 1 и 2 в div [class = row], но, как вы можете видеть, поля не одинаковы по высоте и я бы потратил много места на настольные компьютеры.

Как я могу справиться с этой проблемой?

<div class="row"> 
<div id="leftBar" class="col-md-7"> 

    <div id="mainProfile" class="row"> 
     <div class="col-md-12"> 
      1 
     </div> 
    </div> 

    <div id="details" class="row"> 
     <div class="col-md-6"> 
      3     
     </div> 

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

</div> 


<div id="rightBar" class="col-md-5"> 
    <div id="contact" class="row"> 
     <div class="col-md-6"> 
      2     
     </div> 
    </div> 
    <div id="other" class="row"> 
     <div class="col-md-6">  
      4    
     </div> 
    </div> 
</div>

источник

2013-09-18 Alex Schneider

Заканчивать http://getbootstrap.com/css/#grid есть некоторые информацию относительно использования различных классов столбцов для разных размеров. –

Я все это прочел. –

действительно? Как мне кажется, вы просто используете класс md для всего, а не более конкретные классы xs и sm, предназначенные для мобильных телефонов и планшетов? –

Удалить дополнительный класс строк и добавить еще некоторые устройства специальные классы, как,

col-xs-8 col-sm-8 col-md-6

Проверьте демо here

Проверка документации here

источник

2013-09-18 14:48:38 devo

Ну, есть проблема, о которой я упомянул: разрыв между блоком 1 и 3. –

Это потому, что вы добавили разную высоту для div. Проверьте обновленный скрипт в ответе. http://jsfiddle.net/7WMBr/1/ – devo

Но это точно так! Разделы будут иметь разную высоту, так как контент добавляется пользователем. –

Для меня ваш вопрос кажется идентичным Order of div on mobile, поэтому я также буду голосовать за дубликат.

В вашем случае, см http://bootply.com/82040

CSS

#mainProfile { 
    background-color: #ccaaaa; 
    height:200px; 
} 

#details { 
    background-color: #aaccaa; 
    height:180px; 
} 

#contact { 
    background-color: #cc66ff; 
    height:300px; 
} 

#other { 
    background-color: #aaaacc; 
    height:180px; 
}  

.floatright{float:right;} 
@media (max-width: 992px) 
{  
    .floatright{float:none;} 
}

HTML

<div class="row"> 
    <div id="leftBar" class="col-md-7"> 

     <div id="mainProfile" class="row"> 
      <div class="col-md-12"> 
1    main profile 
      </div> 
     </div> 
    </div>  
    <div id="rightBar2" class="col-md-5 floatright"> 
     <div id="contact" class="row"> 
      <div class="col-md-6"> 2     
      </div> 
     </div> 
    </div> 

<div id="leftBar" class="col-md-7"> 
     <div id="details" class="row"> 
      <div class="col-md-6"> 3 details   
      </div> 

      <div class="col-md-6"> ???     
      </div> 
     </div> 

    </div> 


<div id="rightBar" class="col-md-5"> 
     <div id="other" class="row"> 
      <div class="col-md-6">  4    
      </div> 
     </div> 
    </div> 
</div>

источник

2013-09-19 20:52:15

Bootstrap система 3 сетки отзывчивым

ответ

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