Смещение столбцов не работает (Bootstrap v4.0.0-beta)

Я использую Boostrap 4 (Bootstrap v4.0.0-beta) Beta и сталкиваются с проблемами со смещением столбцов. Раньше я делал offset-md - *, и он работал, а BS4 Beta удаляется в соответствии с документами. Новый метод, упомянутый в документах, использует .ml-auto, когда я пытаюсь использовать его с col-md-4, он компенсирует 4 столбца. То, что я хочу, является настраиваемой коррекцией, например

**<div class="col-md-4 offset-md-2"></div>**

Я попытался использовать

**<div class="col-md-4 ml-md-2"></div>**

но не работал Это ошибка или есть другой способ сделать это?

Вот официальные документы о компенсации https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns

Ответ 1

В бета-версии 1 были удалены классы Bootstrap 4 offset, но будут восстановлены в Beta 2

Новая замена автоматической маржи для смещения будет перемещать столбец как можно больше. Таким образом, это зависит от того, сколько вы хотите "толкнуть" столбец вправо. Если у них нет других столбцов справа от col-md-4, он будет проходить весь путь, если в правой части row. В основном offset имел значение для плавающих столбцов, но теперь больше не актуально, что Bootstrap 4 является flexbox.

Если вы хотите переместить col-md-4 только на два столбца, лучшим способом будет использование столбца фиктивного/заполнителя...

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

https://www.codeply.com/go/SqrQIOAY7

Если есть другие col-md-4 справа от первого, тогда ml-auto и mr-auto будут работать с центрами обоих столбцов...

<div class="row">
        <div class="col-md-4 ml-auto">
            .
        </div>
        <div class="col-md-4 mr-auto">
            .
        </div>
</div>

https://www.codeply.com/go/SqrQIOAY7n

Если вы хотите центрировать col-md-4, просто используйте mx-auto для для создания равных полей с обеих сторон.

Примечание: конкретный столбец смещения будут восстановлены с Beta 2

Ответ 2

ml-md-auto устанавливает margin-left: auto; для размеров md и выше.

Вы не можете установить это как-то вроде 2.

Вам нужно сделать ml-md-auto.

Ответ 3

Изменение

offset-md-2

в

col-md-offset-2

Работал для меня