抵消列不起作用(Bootstrap v4.0.0-beta) [英] Offsetting columns is not working (Bootstrap v4.0.0-beta)

问题描述

我正在使用Boostrap 4(Bootstrap v4.0.0-beta)Beta，并且遇到了偏移列问题. 早些时候，我曾经做过 offset-md-* ，并且可以正常工作，根据BS4 Beta，它已被删除. 文档中提到的新方法使用的是 .ml-auto ，当我尝试将其与 col-md-4 结合使用时，它会偏移4列.我想要的是像这样的自定义偏移量

I am using Boostrap 4(Bootstrap v4.0.0-beta) Beta and facing issues with offsetting columns. Earlier i used to do offset-md-* and it was working, with BS4 Beta this is removed according to docs. The new method mentioned in docs is using .ml-auto , when i try to use it with col-md-4 it is offsetting 4 columns. What i want is custom offsetting like

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

我尝试使用

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

但是没用 这是bug还是另一种方法?

but didn't work Is this is bug or there is another way to do it ?

这是有关抵消的官方文档 https://getbootstrap.com/docs/4.0/layout/grid/#offsetting -列

Here is official docs about offsetting https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns

推荐答案

Bootstrap 4 offset类在Beta 1中被临时删除，但在

Bootstrap 4 offset classes were temporarily removed in Beta 1, but were restored in Beta 2.

类名称col-{breakpoint}-offset-*被替换为offset-{breakpoint}-*

新的自动边距也可用于抵消列尽可能将色谱柱移到上方.因此，这取决于您要在右侧推动"该列的量.如果它们在col-md-4的右边没有其他列，那么将一直到row的右边. 基本上offset与浮动列相关，但由于Bootstrap 4为flexbox，因此不再相关.

The new auto-margins also work for offsetting columns will move the column over as much as possible. So, it depends on how much you want to "push" the column to the right. If they're no other columns to the right of the col-md-4 it will go all the way if to right side of the row. Basically offset was relevant for floated columns but is no longer relevant now that Bootstrap 4 is flexbox.

如果要将col-md-4移动到仅2个列单位上，最好的方法是使用虚拟/占位符列 ...

If you want to move the col-md-4 over just 2 column units, the best way would be to use a dummy/placeholder column...

<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将使两列居中 ...

If there are other col-md-4 to the right of the first, then ml-auto and mr-auto would work to center both columns...

<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来在两侧都创建相等的边距.

If you want to center the col-md-4 then simply use mx-auto to create equal margins on both sides.

注意:特定列 偏移将从Beta 2开始恢复

Note: specific column offsets will be restored as of Beta 2

这篇关于抵消列不起作用(Bootstrap v4.0.0-beta)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！