Стовпці

Дізнайтеся, як змінювати стовпці за допомогою кількох параметрів вирівнювання, упорядкування та зміщення завдяки нашій системі сітки flexbox. Крім того, подивіться, як використовувати класи стовпців для керування шириною елементів, які не є сіткою.

На цій сторінці

Голови вгору! Обов’язково прочитайте сторінку сітки, перш ніж заглиблюватись у те, як змінювати та налаштовувати стовпці сітки.

Як вони працюють

Стовпці побудовані на архітектурі flexbox сітки. Flexbox означає, що у нас є параметри для зміни окремих стовпців і груп стовпців на рівні рядків . Ви вибираєте, як стовпці збільшуються, зменшуються чи іншим чином змінюються.
Під час створення макетів сітки весь вміст розміщується в стовпцях. Ієрархія сітки Bootstrap іде від контейнера до рядка, стовпця до вашого вмісту. У рідкісних випадках ви можете поєднати вміст і колонку, але майте на увазі, що це може призвести до непередбачених наслідків.
Bootstrap містить попередньо визначені класи для створення швидких, адаптивних макетів. З шістьма точками розриву та дюжиною стовпців на кожному рівні сітки у нас є десятки класів, які вже створено для створення ваших бажаних макетів. За бажанням це можна вимкнути через Sass.

Вирівнювання

Використовуйте утиліти вирівнювання flexbox для вертикального та горизонтального вирівнювання стовпців.

Вертикальне вирівнювання

Одна з трьох колон

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Одна з трьох колон

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Горизонтальне вирівнювання

Одна з двох колон

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Обгортання колон

Якщо в одному рядку розміщено більше 12 стовпців, кожна група додаткових стовпців буде перенесена на новий рядок як єдине ціле.

.col-9

.col-4
Оскільки 9 + 4 = 13 > 12, цей div із 4 стовпцями переноситься на новий рядок як один безперервний блок.

.col-6
Наступні стовпці продовжуються вздовж нового рядка.

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

Розриви колон

Щоб розбити стовпці на новий рядок у flexbox, потрібен невеликий хитр: додайте елемент у будь-яке місце width: 100%, де ви хочете перенести свої стовпці на новий рядок. Зазвичай це досягається за допомогою кількох .rows, але не кожен метод реалізації може це врахувати.

.col-6 .col-sm-3

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

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

Ви також можете застосувати цю перерву до певних точок зупинки за допомогою наших адаптивних утиліт для відображення .

.col-6 .col-sm-4

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

Перевпорядкування

Замовити заняття

Використовуйте .order-класи для керування візуальним порядком вмісту. Ці класи адаптивні, тому ви можете встановити orderточку зупинки (наприклад, .order-1.order-md-2). 1Включає підтримку для 5всіх шести рівнів сітки.

Спочатку в DOM, порядок не застосовано

Другий у DOM, з більшим замовленням

Третє місце в DOM з порядком 1

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

Існують також класи responsive .order-firstі .order-last, які змінюють orderелемент, застосовуючи order: -1і order: 6, відповідно. За потреби ці класи також можна змішувати з пронумерованими .order-*класами.

Перший в DOM, замовлений останнім

Другий у DOM, невпорядкований

Третя в ДОМі, замовлена першою

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

Зміщення колон

Ви можете зміщувати стовпці сітки двома способами: нашими адаптивними .offset-класами сітки та нашими утилітами margin . Розмір класів сітки відповідає стовпцям, тоді як поля більш корисні для швидких макетів, де ширина зсуву є змінною.

Залікові класи

Перемістіть стовпці вправо за допомогою .offset-md-*класів. Ці класи збільшують ліве поле стовпця за *стовпцями. Наприклад, .offset-md-4переміщається .col-md-4по чотирьох колонках.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

На додаток до очищення стовпців у реагуючих контрольних точках, вам може знадобитися скинути зміщення. Перегляньте це в дії на прикладі сітки .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

Маржинальні комунальні послуги

З переходом до flexbox у версії 4 ви можете використовувати утиліти маржин, як-от .me-autoпримусове віддалення однорідних стовпців один від одного.

.col-md-4

.col-md-4 .ms-авто

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-авто

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Окремі класи стовпців

Класи .col-*також можна використовувати за межами a .rowдля надання елементу певної ширини. Щоразу, коли класи стовпців використовуються як непрямі дочірні елементи рядка, заповнення пропускаються.

.col-3: ширина 25%

.col-sm-9: ширина 75% над точкою розриву sm

<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

Класи можна використовувати разом із утилітами для створення адаптивних плаваючих зображень. Обов’язково загорніть вміст у .clearfixоболонку, щоб очистити плаваючу форму, якщо текст коротший.

Абзац тексту-заповнювача. Ми використовуємо його тут, щоб показати використання класу clearfix. Ми додаємо тут чимало безглуздих фраз, щоб продемонструвати, як стовпці взаємодіють тут із плаваючим зображенням.

Як ви бачите, абзаци витончено обертаються навколо плаваючого зображення. А тепер уявіть, як це виглядатиме, маючи тут якийсь реальний вміст, а не просто цей нудний текст-заповнювач, який продовжується і продовжується, але насправді не передає відчутної інформації. Він просто займає місце, і його не варто читати.

І все ж, ось ви, як і раніше, наполегливо читаєте цей текст-заповнювач, сподіваючись отримати ще якісь ідеї чи якийсь прихований пасхальний вміст. Можливо, жарт. На жаль, тут цього немає.

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>