Столбцы

Внимание! Сначала обязательно прочитайте страницу "Сетка", прежде чем углубляться в то, как изменять и настраивать столбцы сетки.

Как они работают

Столбцы основаны на архитектуре flexbox сетки. Flexbox означает, что у нас есть варианты для изменения отдельных столбцов и изменения групп столбцов на уровне строки. Вы выбираете, как столбцы растут, уменьшаются или иным образом изменяются.
При создании макетов сетки весь контент помещается в столбцы. Иерархия сетки Bootstrap идет от контейнера к строке, к столбцу и к вашему контенту. В редких случаях вы можете объединить контент и столбец, но будьте осторожны, так как могут возникнуть непредвиденные последствия.
Bootstrap включает предопределенные классы для быстрого создания адаптивных макетов. Благодаря шести точкам останова и дюжине столбцов на каждом уровне сетки у нас есть десятки классов, уже созданных для вас, чтобы создать нужные макеты. Это можно отключить через Sass, если вы захотите.

Выравнивание

Используйте служебные программы выравнивания flexbox для вертикального и горизонтального выравнивания столбцов.

Вертикальное выравнивание

Измените вертикальное выравнивание с помощью любого из адаптивных align-items-* классов.

html

<div class="container text-center">
  <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>

html

<div class="container text-center">
  <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>

html

<div class="container text-center">
  <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>

Или измените выравнивание каждого столбца индивидуально с помощью любого из адаптивных .align-self-* классов.

html

<div class="container text-center">
  <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>

Горизонтальное выравнивание

Измените горизонтальное выравнивание с помощью любого из адаптивных justify-content-* классов.

html

<div class="container text-center">
  <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 столбцов, каждая группа дополнительных столбцов, как единое целое, переносится на новую строку.

html

<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% там, где вы хотите переносить столбцы на новую строку. Обычно это достигается с помощью нескольких .row элементов, но не каждый метод реализации может учитывать это.

html

<div class="container text-center">
  <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>

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

html

<div class="container text-center">
  <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 на всех шести уровнях сетки. Если вам нужно больше .order-* классов, вы можете изменить значение по умолчанию через Sass-переменную.

html

<div class="container text-center">
  <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>

Также существуют адаптивные .order-first и .order-last классы, которые изменяют order элемента, применяя order: -1 и order: 6, соответственно. Эти классы также могут быть смешаны с пронумерованными .order-* классами по мере необходимости.

html

<div class="container text-center">
  <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- классы сетки и наши служебные программы отступов. Классы сетки настроены по размеру, чтобы соответствовать столбцам, в то время как отступы более полезны для быстрых макетов, где ширина смещения изменяема.

Классы смещения

Перемещайте столбцы вправо, используя .offset-md-* классы. Эти классы увеличивают левый отступ столбца на * столбцов. Например, .offset-md-4 смещает .col-md-4 на четыре столбца.

html

<div class="container text-center">
  <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>

В дополнение к очистке столбцов в адаптивных точках останова, вам может потребоваться сбросить смещения. Посмотрите на это в действии в примере сетки.

html

<div class="container text-center">
  <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, чтобы отделить соседние столбцы друг от друга.

html

<div class="container text-center">
  <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-* также могут использоваться вне .row для задания определенной ширины элемента. В тех случаях, когда классы столбцов используются как непрямые потомки строки, отступы опускаются.

html

<div class="col-3 p-3 mb-2">
  .col-3: width of 25%
</div>

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

Классы могут использоваться вместе со служебными программами для создания адаптивных плавающих изображений. Убедитесь, что вы заключили контент в обёртку .clearfix, чтобы очистить плавание, если текст короче.

html

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

© 2011–2022 Twitter, Inc.
© 2011–2022 The Bootstrap Authors
Code licensed under the MIT License.
Documentation licensed under the Creative Commons Attribution License v3.0.
https://getbootstrap.com/docs/5.3/layout/columns/