偏移列不起作用(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 列.我想要的是像

这样的自定义偏移

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

我尝试使用

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

但是没有用这是错误还是有其他方法可以做到?

这是关于抵消的官方文档

解决方案

Bootstrap 4 offset 类在 Beta 1 中被暂时删除，但在 测试版 2.

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

新的自动边距也适用于偏移列尽可能多地移动列.因此，这取决于您想将列推"到右侧的程度.如果它们不是 col-md-4 右侧的其他列，它将一直走到 row 的右侧.基本上 offset 与浮动列相关，但现在 Bootstrap 4 是 flexbox 后不再相关.

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

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

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

如果第一个右侧还有其他 col-md-4，则 ml-auto 和 mr-auto 将起作用将两列居中...

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

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

如果您想将 col-md-4 居中，只需使用 mx-auto 即可在两侧创建相等的边距.

<小时>

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

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>**

I tried using

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

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

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

解决方案

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

The class names col-{breakpoint}-offset-* were replaced with offset-{breakpoint}-*

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.

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

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

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

---

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

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