ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

Bootstrap 4 Tutorial

BS4 HOME BS4 Get Started BS4 Grid Basic BS4 Typography BS4 Colors BS4 Tables BS4 Images BS4 Jumbotron BS4 Alerts BS4 Buttons BS4 Button Groups BS4 Badges BS4 Progress Bars BS4 Pagination BS4 List Groups BS4 Cards BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbar BS4 Forms BS4 Inputs BS4 Carousel BS4 Modal BS4 Tooltip BS4 Popover BS4 Scrollspy BS4 Utilities BS4 Flex BS4 Media Objects BS4 Filters

Bootstrap 4 Grid

BS4 Grid System BS4 Stacked/Horizontal BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge BS4 Grid Examples

Bootstrap 4 Theme

BS4 Basic Template

Bootstrap 4 Ref

All Classes JS Alert JS Button JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Tooltip

Bootstrap 4 Grid - Large


Пример большой сетки

  Extra small Small Medium Large Extra Large
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
Screen width <576px >=576px >=768px >=992px >=1200px

В предыдущей главе мы представили пример Grid с классами для малых и средних устройств. Мы использовали два Div (столбцы), и мы дали им 25% 75% Сплит на небольших устройствах, и 50%% разделить на средние устройства:

<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>

Но на больших устройствах дизайн может быть лучше, как 33%% Сплит.

Большие устройства определяются как имеющие ширину экрана от 992 пикселей до 1199 пикселей.

Для больших устройств мы будем использовать .col-lg-* классы:

<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>

Теперь Bootstrap собирается сказать "на малых размеров, посмотрите на классы с-SM-в них и использовать их. На средних размерах, посмотрите на классы с-MD-в них и использовать их. На больших размерах, посмотрите на классы со словом-LG-в них и использовать эти ".

Следующий пример приведет к 25% 75% Сплит на малых устройствах, 50% 50% Сплит на средних устройствах, и 33%% на 66% Сплит на больших и XLarge устройств. На дополнительных малых устройствах, он будет автоматически стек (100%):

.col-sm-3 .col-md-6 .col-lg-4
.col-sm-9 .col-md-6 .col-lg-8

Пример

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

Примечание: Убедитесь, что сумма добавляет до 12 или меньше (не обязательно использовать все 12 доступных столбцов):


Использование только больших

В приведенном ниже примере мы указываем только .col-lg-6 класс (без .col-md-* и/или .col-sm-* ). Это означает, что большие и XLarge устройства будут разделены на 50%. Однако, для средних, малых и экстренных малых приспособлений, оно будет штабелировать вертикально (100% ширины):

Пример

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-lg-6">
      <p>Sed ut perspiciatis...</p>
    </div>
  </div>
</div>

Автоматические столбцы макета

В Bootstrap 4 имеется простой способ создания столбцов с одинаковой шириной для всех устройств: просто удалите номер из .col-lg-* и используйте только .col-lg класс на указанное число элементов Col. Bootstrap будет распознать количество столбцов, и каждый столбец будет иметь одинаковую ширину.

Если размер экрана меньше 992пкс, столбцы будут складываться горизонтально:

<!-- Two columns: 50% width on large and up-->
<div class="row">
  <div class="col-lg">1 of 2</div>
  <div class="col-lg">2 of 2</div>
</div>

<!-- Four columns: 25% width on large and up -->
<div class="row">
  <div class="col-lg">1 of 4</div>
  <div class="col-lg">2 of 4</div>
  <div class="col-lg">3 of 4</div>
  <div class="col-lg">4 of 4</div>
</div>
1 of 2
2 of 2
1 of 4
2 of 4
3 of 4
4 of 4