css - sfnge8fjt3gxweongsv7zt27nxfoaoapmym81iuxopkfojwj8erdknlpmo - bootstrap layouts
La compensación de columnas no funciona(Bootstrap v4.0.0-beta) (3)
Cambiando
offset-md-2
a:
col-md-offset-2
Trabajó para mi
Estoy usando Boostrap 4 (Bootstrap v4.0.0-beta) Beta y tengo problemas con las columnas de compensación. Anteriormente solía hacer offset-md- * y estaba funcionando, con BS4 Beta esto se elimina de acuerdo con los documentos. El nuevo método mencionado en los documentos está usando .ml-auto , cuando trato de usarlo con col-md-4 está compensando 4 columnas. Lo que quiero es un desplazamiento personalizado como
**<div class="col-md-4 offset-md-2"></div>**
Traté de usar
**<div class="col-md-4 ml-md-2"></div>**
pero no funcionó ¿Esto es un error o hay otra forma de hacerlo?
Aquí hay documentos oficiales sobre compensación https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns
Las clases de
offset
Bootstrap 4 se eliminaron temporalmente en Beta 1, pero se restauraron en
Beta 2
.
Los nombres de clase
col-{breakpoint}-offset-*
fueron reemplazados por
offset-{breakpoint}-*
Los nuevos
https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns
que moverán la columna tanto como sea posible.
Por lo tanto, depende de cuánto desee "empujar" la columna hacia la derecha.
Si no hay otras columnas a la derecha de la
col-md-4
, irá hasta el lado derecho de la
row
.
Básicamente, el
offset
era relevante para las columnas flotantes, pero ya no es relevante ahora que Bootstrap 4 es flexbox.
Si desea mover el
col-md-4
sobre solo 2 unidades de columna, la mejor manera sería usar una
columna ficticia / marcador de posición
...
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-4">
..
</div>
</div>
https://www.codeply.com/go/SqrQIOAY7
Si hay otros
col-md-4
a la derecha del primero, entonces
ml-auto
y
mr-auto
funcionarían para
centrar ambas columnas
...
<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
Si desea centrar el
col-md-4
, simplemente use
mx-auto
para
crear márgenes iguales en ambos lados
.
Nota: las compensaciones de columna específicas se restaurarán a partir de Beta 2
ml-md-auto
establece
margin-left: auto;
para tallas
md
y superiores.
No puedes configurar eso en algo como
2
.
Necesitas hacer
ml-md-auto
.