Offset bootstrap: Grid system

Содержание

Колонки · Bootstrap v5.1

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

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

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

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

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

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

Одна из трех колонок

<div>
  <div>
    <div>
      Одна из трех колонок
    </div>
    <div>
      Одна из трех колонок
    </div>
    <div>
      Одна из трех колонок
    </div>
  </div>
  <div>
    <div>
      Одна из трех колонок
    </div>
    <div>
      Одна из трех колонок
    </div>
    <div>
      Одна из трех колонок
    </div>
  </div>
  <div>
    <div>
      Одна из трех колонок
    </div>
    <div>
      Одна из трех колонок
    </div>
    <div>
      Одна из трех колонок
    </div>
  </div>
</div>

Одна из трех колонок


 <div>
  <div>
    <div>
      Одна из трех колонок
    </div>
    <div>
      Одна из трех колонок
    </div>
    <div>
      Одна из трех колонок
    </div>
  </div>
</div>

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

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

<div>
  <div>
    <div>
      Одна из двух колонок
    </div>
    <div>
      Одна из двух колонок
    </div>
  </div>
  <div>
    <div>
      Одна из двух колонок
    </div>
    <div>
      Одна из двух колонок
    </div>
  </div>
  <div>
    <div>
      Одна из двух колонок
    </div>
    <div>
      Одна из двух колонок
    </div>
  </div>
  <div>
    <div>
      Одна из двух колонок
    </div>
    <div>
      Одна из двух колонок
    </div>
  </div>
  <div>
    <div>
      Одна из двух колонок
    </div>
    <div>
      Одна из двух колонок
    </div>
  </div>
  <div>
    <div>
      Одна из двух колонок
    </div>
    <div>
      Одна из двух колонок
    </div>
  </div>
</div>

Обертывание колонок

Если в одной строке помещается более 12 колонок, каждая группа дополнительных колонок, как одно целое, переносится на новую строку.

.col-9

.col-4
Поскольку 9 + 4 = 13 > 12, этот div шириной в 4 колонки переносится на новую строку как один непрерывный блок.

.col-6
Последующие колонки продолжаются вдоль новой строки.

<div>
  <div>
    <div>.col-9</div>
    <div>.col-4<br>Поскольку 9 + 4 = 13 &gt; 12, этот div шириной в 4 колонки переносится на новую строку как один непрерывный блок.</div>
    <div>.col-6<br>Последующие колонки продолжаются вдоль новой строки.</div>
  </div>
</div>

Разрывы колонок

Разбиение колонок на новую строку в flexbox требует небольшого хака: добавьте элемент с width: 100% везде, где Вы хотите перенести колонки на новую строку. Обычно это достигается с помощью нескольких .row, но не каждый метод реализации может это учитывать.

.col-6 .col-sm-3

<div>
  <div>
    <div>. col-6 .col-sm-3</div>
    <div>.col-6 .col-sm-3</div>
    <!-- Заставит следующие колонки переходить на новую строку -->
    <div></div>
    <div>.col-6 .col-sm-3</div>
    <div>.col-6 .col-sm-3</div>
  </div>
</div>

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

.col-6 .col-sm-4

<div>
  <div>
    <div>.col-6 .col-sm-4</div>
    <div>.col-6 .col-sm-4</div>
    <!-- Заставит следующие колонки переходить на новую строку в контрольной точке md и выше -->
    <div></div>
    <div>.col-6 .col-sm-4</div>
    <div>.col-6 .col-sm-4</div>
  </div>
</div>

Изменение порядка

Класса порядка

Используйте классы .order- для управления визуальным порядком Вашего контента.

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

Первый в DOM, порядок не применяется

Второй в DOM, с наибольшим порядком

Третий в DOM, с 1 порядком

<div>
  <div>
    <div>
      Первый в DOM, порядок не применяется
    </div>
    <div>
      Второй в DOM, с наибольшим порядком
    </div>
    <div>
      Третий в DOM, с 1 порядком
    </div>
  </div>
</div>

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

Первый в DOM, порядок последнего

Второй в DOM, без порядка

Третий в DOM, порядок первого

<div>
  <div>
    <div>
      Первый в DOM, порядок последнего
    </div>
    <div>
      Второй в DOM, без порядка
    </div>
    <div>
      Третий в DOM, порядок первого
    </div>
  </div>
</div>

Смещение колонок

Вы можете смещать колонки сетки двумя способами: нашими адаптивными классами сетки . offset- и нашими утилитами полей. Классы сетки имеют размер, соответствующий колонкам, в то время как поля более полезны для быстрых макетов, где ширина смещения является переменной.

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

Переместите колонки вправо, используя классы .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>
  <div>
    <div>.col-md-4</div>
    <div>.col-md-4 .offset-md-4</div>
  </div>
  <div>
    <div>.col-md-3 .offset-md-3</div>
    <div>.col-md-3 .offset-md-3</div>
  </div>
  <div>
    <div>.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>
  <div>
    <div>.col-sm-5 .col-md-6</div>
    <div>.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div>
    <div>.col-sm-6 .col-md-5 .col-lg-6</div>
    <div>.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

Утилиты полей

С переходом на flexbox в v4 Вы можете использовать утилиты полей, такие как

.me-auto, чтобы отодвинуть одноуровневые столбцы друг от друга.

.col-md-4

.col-md-4 .ms-auto

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

.col-auto .me-auto

.col-auto

<div>
  <div>
    <div>.col-md-4</div>
    <div>. col-md-4 .ms-auto</div>
  </div>
  <div>
    <div>.col-md-3 .ms-md-auto</div>
    <div>.col-md-3 .ms-md-auto</div>
  </div>
  <div>
    <div>.col-auto .me-auto</div>
    <div>.col-auto</div>
  </div>
</div>

Автономные классы колонок

Классы .col-* также могут использоваться вне .row, чтобы дать элементу определенную ширину. Когда классы колонок используются как непрямые дочерние элементы строки, отступы опускаются.

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

.col-sm-9: ширина равна 75% выше контрольной точки sm

<div>
  .col-3: ширина равна 25%
</div>
<div>
  .col-sm-9: ширина равна 75% выше контрольной точки sm
</div>

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

PlaceholderАдаптивное плавающее изображение

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

Как видите, абзацы изящно обтекают плавающее изображение. А теперь представьте, как это будет выглядеть с фактическим содержанием здесь, а не просто с этим скучным текстом-заполнителем, который продолжается и продолжается, но на самом деле не передает никакой осязаемой информации. Он просто занимает место, и его не стоит читать.

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

<div>
<img src="..." alt="...">
<p>
Абзац текста-заполнителя. Мы используем его здесь, чтобы показать использование класса clearfix. Мы добавляем здесь довольно много бессмысленных фраз, чтобы продемонстрировать, как столбцы здесь взаимодействуют с плавающим изображением.
</p>
<p>
Как видите, абзацы изящно обтекают плавающее изображение. А теперь представьте, как это будет выглядеть с фактическим содержанием здесь, а не просто с этим скучным текстом-заполнителем, который продолжается и продолжается, но на самом деле не передает никакой осязаемой информации. Он просто занимает место, и его не стоит читать.
</p>
<p>
И тем не менее, здесь вы, по-прежнему настойчив в чтении этот текст-заполнитель, в надежде еще несколько прозрений, или некоторые скрытые пасхальные яйца содержания. Возможно, шутка. К сожалению, здесь ничего этого нет.
</p>
</div>

html — смещение столбцов в Bootstrap

спросил 6 лет, 4 месяца назад

Изменено 1 месяц назад

Просмотрено 110 тысяч раз

Вот идея того, что я хочу сделать:

 
    <дел>
        <дел>
        <дел>
        <дел>
        <дел>

Смещение работает как пустой столбец, который останется перед вашим столбцом.

Например, если вам нужен столбец, который будет иметь половину размера экрана и будет точно посередине, вам нужно будет сделать:

Полная строка содержит 12 столбцов. Таким образом, у вас будет 6 столбцов (половина строки) и смещение в 3 столбца. Он будет ровно посередине экрана.

Штирлиц — Сеть печатных салонов в Перми

Offset bootstrap: Grid system · Bootstrap