Я понимаю, что такое сетка, в основном один целый ряд будет иметь 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>
Смещения используются для интервальных элементов в адаптивной сетке.
Единица основана на макете столбца.
Вы можете определить смещение следующим образом: 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
Смещение означает: перемещать столбцы вправо с помощью классов .col-md-offset-*. Эти классы увеличивают левое поле столбца на * столбцы.
Например, col-md-offset-3 увеличивает левое поле на 3 для средних устройств.