Что делает класс контейнера в Twitter Bootstrap 3?

Question

Я видел, что класс .container используется во многих местах, но не понял его использования. И есть также класс «контейнер-жидкость».

Может ли кто-нибудь объяснить использование класса контейнеров кратким примером?

Answer 1

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

из bootsrap

Контейнеры

Bootstrap требует, содержащий элемент, чтобы обернуть сайту содержание и дом нашей системы сетки. Вы можете выбрать один из двух контейнеров для использования в ваших проектах. Обратите внимание, что из-за заполнения и больше ни один контейнер не является гнездовым.

Используйте .контейнер для чувствительного контейнера с фиксированной шириной.

<div class="container"> 
    ... 
</div> 

Использование .container жидкости для полной ширины контейнера, охватывающей всю ширину вашего просмотра.

<div class="container-fluid"> 
    ... 
</div> 

Answer 2

Маржа и ширина - разница!

@media all and (min-width:992px) { 
      .container { 
       width: 970px; 
      } 
     } 
     @media all and (min-width:768px) { 
      .container { 
       width: 750px; 
      } 
     } 

      .container { 
     padding-right: 15px; 
     padding-left: 15px; 
     margin-right: auto; 
     margin-left: auto; 
    } 

     .container-fluid { 
    padding-right: 15px; 
    padding-left: 15px; 
    margin-right: auto; 
    margin-left: auto; 
} 

Обычно контейнер-жидкость не обеспечивает запас в любом виде экрана

Но контейнера обеспечивают определенную маржу в md и lg экран

REFERENCE

Answer 3

подмигнули просто. класс div.container применяет фиксированное значение с (применяется маржа auto) для содержания содержимого, которое вы хотите внутри. И этот контейнер реагирует, поэтому, когда вы находитесь в режиме XS (мобильный), ширина контейнера составляет 100%.

.контейнер-жидкость просто применяет ширину 100% (полная ширина) на всех устройствах, поэтому вы увидите, что ваш контент охватывает всю ширину вашего окна просмотра.

Лучший способ проверить это - создать простой html с div и установить его фоновым цветом, а затем применить .container и .container-fluid, чтобы увидеть эффект, изменяющий размер вашего проводника.