Что именно компенсируется в бутстрапе?

Я понимаю, что такое сетка, в основном один целый ряд будет иметь 12 пробелов.

<div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
</div>

По сути, приведенный выше код просто делит пробелы на 3 раздела, но я не понимаю, в чем смысл установки смещения?

<div class="col-lg-6 col-md-offset-3"></div>

Ответы

Ответ 1

Смещения используются для интервальных элементов в адаптивной сетке.

Единица основана на макете столбца.

Вы можете определить смещение следующим образом: col- [точка останова] -offset- [количество столбцов]

В этом примере допускается, что наш макет состоит из 12 столбцов:

<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <p>test</p>
    </div>
</div>

Означает, что в среднем диапазоне системы сетки элемент будет иметь ширину 6 столбцов и будет 3 пустых столбца, прежде чем элемент (и, как следствие, , будет иметь 3 пустых столбца после).

В результате получается div шириной в 6 столбцов, центрированный в контейнере.

Есть пример, показывающий, как он рендерится в документации Bootstrap.https://getbootstrap.com/docs/4.3/layout/grid/#offsetting-columns

Ответ 2

Смещение означает: перемещать столбцы вправо с помощью классов .col-md-offset-*. Эти классы увеличивают левое поле столбца на * столбцы.

Например, col-md-offset-3 увеличивает левое поле на 3 для средних устройств.