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

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 - Extra Large


Пример сетки XLarge

  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% 50% разделить на средние устройства и 33%% Сплит на больших устройствах:

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

Но на XLarge устройствах конструкция может быть лучше, как 20% 80% Сплит.

Очень большие устройства определяются как имеющие ширину экрана от 1200 пикселей и выше.

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

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

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

col-sm-3 col-md-6 col-lg-4 col-xl-2
col-sm-9 col-md-6 col-lg-8 col-xl-10

Пример

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

Note: Make sure that the sum always adds up to 12.


Использование только XLarge

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

Пример

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

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

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

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

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

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