bootstrap отзывчивый формат жидкости

Question

Я начал создавать дизайн сайта с помощью бутстрапа и нуждался в некоторой помощи. Я получил 6 контейнеров, которые мне нужно организовать (и масштабировать) для разных размеров экрана, но я не могу заставить его работать.

Я хочу различные конструкции для экрана с (в пикселях):

• 992px и за ее пределами
• 768px на 991px
• 480px-766px
• меньше до 439px

Я хочу разместить свои компоненты страницы следующим образом:

Как это сделать? Нужно ли мне создавать 4 разных макета и использовать скрытые классы для определения того, какой макет показывать? Это похоже на большую работу при обновлении контента. Или я могу сделать это с помощью некоторой черной магии ботстрапа?

Answer 1

Какой бутстреп вы используете? В любом случае, я вам помогу. Предполагая, что вы используете 3.2.0 ...

http://www.bootply.com/krobF8P83o

<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-lg-12 col-md-8 col-sm-12 col-xs-12"> 
 
     <div class="row"> 
 
     <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12"></div> 
 
     <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12"></div> 
 
     <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12"></div> 
 
     <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12"></div> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-6 col-md-4 col-sm-12 col-xs-12"> 
 
     <div class="row"> 
 
     <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12"></div> 
 
     </div> 
 
    </div> 
 
    <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12"> 
 
     <div class="row"> 
 
     <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Я думаю, вам нужно будет использовать немного пользовательских css поверх бутстрапа, возможно, определите несколько медиа-запросов, чтобы изменить определение стиля класса для разных размеров окна.

Мое предложение - посмотреть, как Bootstrap 3 делает это оправданным navs. Они меняются аналогичным образом, когда ширина видового экрана уменьшается.

http://getbootstrap.com/components/#nav-justified.

Answer 3

самозагрузки минимально возможной шириной 768px, за это все будет обрабатываться так же.

, но вы можете назначить несколько классов col-width одному div внутри строки.

<div class="row"> 
     <div class="col-xs-12 col-sm-12 col-md-8 col-lg-12"> 
      <div class="row"> 
       <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> 
       A 
       </div> 
       <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> 
       B 
       </div> 
       <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"> 
       C 
       </div> 
       <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3"> 
       D 
       </div> 
      </div> 
     </div> 
     <div class="col-xs-12 col-sm-12 col-md-4 col-lg-6"> 
     E 
     </div> 
     <div class="col-xs-12 col-sm-6 col-md-12 col-lg-6"> 
     F 
     </div> 
    </div> 

Answer 4

Это определенно возможно. Here - это скрипка и video demo. Все, что вам нужно - это customize Bootstrap, чтобы вставить точки останова медиа-запроса в пользовательские размеры пикселей и настроить высоты ячеек для тех же медиа-запросов (чтобы сделать E == A + C == B + D).

HTML-:

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-md-8 col-lg-12"> 
      <div class="row"> 
       <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"><span>A</span></div> 
       <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"><span>B</span></div> 
       <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"><span>C</span></div> 
       <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3"><span>D</span></div> 
      </div> 
     </div> 
     <div class="col-xs-12 col-md-4 col-lg-6"><span>E</span></div> 
     <div class="col-md-12 col-lg-6"><span>F</span></div> 
    </div> 
</div> 

И CSS:

span { 
    display: block; 
    float: left; 
    width: 100%; 
    padding: 100px 0; 
    border: 5px solid black; 
    font-size: 40px; 
    font-weight: bold; 
    text-align: center; 
} 
.row { 
    margin: 0; 
} 
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { 
    padding: 0; 
    margin: 0; 
}