twitter-bootstrap 偏移列不起作用(Bootstrap v4.0.0-beta)
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/45650990/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Offsetting columns is not working (Bootstrap v4.0.0-beta)
提问by Prashant Sharma
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-4it is offsetting 4 columns. What i want is custom offsetting like
我正在使用 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>**
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
这是关于偏移的官方文档
https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns
回答by Zim
Bootstrap 4 offsetclasses were temporarily removed in Beta 1, but were restored in Beta 2.
Bootstrap 4offset类在 Beta 1 中被暂时删除,但在Beta 2中恢复。
The class names col-{breakpoint}-offset-*were replaced with offset-{breakpoint}-*
类名col-{breakpoint}-offset-*被替换为offset-{breakpoint}-*
The new auto-margins also work for offsetting columnswill 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-4it will go all the way if to right side of the row. Basically offsetwas relevant for floated columns but is no longer relevant now that Bootstrap 4 is flexbox.
新的自动边距也适用于偏移列,将尽可能多地移动列。因此,这取决于您想将列“推”到右侧的程度。如果它们不是 右侧的其他列,col-md-4它会一直走到row. 基本上offset与浮动列相关,但现在不再相关,因为 Bootstrap 4 是 flexbox。
If you want to move the col-md-4over just 2 column units, the best way would be to use a dummy/placeholder column...
如果您只想移动col-md-4超过 2 个列单位,最好的方法是使用虚拟/占位符列...
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4">
..
</div>
</div>
https://www.codeply.com/go/SqrQIOAY7
https://www.codeply.com/go/SqrQIOAY7
If there are other col-md-4to the right of the first, then ml-autoand mr-autowould work to center both columns...
如果col-md-4第一列的右侧还有其他列,则ml-autoandmr-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
https://www.codeply.com/go/SqrQIOAY7n
If you want to center the col-md-4then simply use mx-autoto create equal margins on both sides.
如果要居中col-md-4,然后简单地使用mx-auto,以创造两岸平等的利润率。
Note: specific column offsets will be restored as of Beta 2
注意:特定列偏移量将从 Beta 2 开始恢复
回答by clamchoda
Changing
改变
offset-md-2
to:
到:
col-md-offset-2
Worked for me
对我来说有效
回答by Oliver Ni
ml-md-autosets margin-left: auto;for sizes mdand above.
ml-md-auto套margin-left: auto;尺寸md及以上。
You can't set that to something like 2.
您不能将其设置为类似2.
You need to do ml-md-auto.
你需要做ml-md-auto。

