Bootstrap 3.0: Реализация сетевой сетки

Question

Я использую Bootstrap 3.0 в своем проекте (для первого раза). теперь то, что я хочу, состоит в том, чтобы иметь 6 ящиков в строке шириной 1024 пикселя, но когда страница просматривается в закладках, она должна идти до 3-х ящиков в строке. используя следующий код, у меня есть шесть ящиков для больших экранов, но для ipads/tabs он не попадает в 3 окна на строки. Пожалуйста, см. Код и предложите мне способ его исправить.

<div class="container">    
<div class="row" id="features"> 
    <div class="col-sm-2 col-sm-4 "> 
    <div class="panel"> 
    <span>Panel content </span>       
    </div><!-- end panel --> 
    </div><!-- end col-sm-2--> 

    <div class="col-sm-2 col-sm-4 "> 
    <div class="panel"> 
    <span>Panel content </span>       
    </div><!-- end panel --> 
    </div><!-- end col-sm-2--> 

    and six boxes like this 
</div > 
</div > 
</div> 

Answer 1

Bootstrap alredy приносит отзывчивый дизайн, но только до 768px (ширина Ipad). Вы можете использовать эту функциональность начальной загрузки с их колонной системы:

.col-xs- в < 768px .col-SM- в ≥768px .col-MD- к ≥992px и .col-LG- к ≥1200px

есть больше информации в Сети: http://getbootstrap.com/css/

Если вы хотите адаптивный дизайн ниже 768 вы должны будете сделать это самостоятельно с помощью:

@media (микс-ширина: 600px, максимальная ширина: 768px) например.