web-dev-qa-db-fra.com

La compensation des colonnes ne fonctionne pas (Bootstrap v4.0.0-beta)

J'utilise Boostrap 4 (Bootstrap v4.0.0-beta) Beta et je rencontre des problèmes avec les colonnes de compensation. Auparavant, je faisais offset-md - * et cela fonctionnait, avec BS4 Beta, cela est supprimé selon les documents. La nouvelle méthode mentionnée dans la documentation utilise . Ml-auto , lorsque j'essaie de l'utiliser avec col-md -4 il compense 4 colonnes. Ce que je veux, c'est une compensation personnalisée comme

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

J'ai essayé d'utiliser

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

mais n'a pas fonctionné Est-ce un bug ou existe-t-il une autre façon de le faire?

Voici les documents officiels sur la compensation https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columnsBootstrap v4 Beta

csstwitter-bootstrapbootstrap-4
22
Prashant Sharma

Les classes Bootstrap 4 offset ont été temporairement supprimées en Beta 1, mais ont été restaurées en Beta 2 .

Les noms de classe col-{breakpoint}-offset-* ont été remplacés par offset-{breakpoint}-*

Le nouveau les marges automatiques fonctionnent également pour les colonnes décalées déplacera la colonne autant que possible. Donc, cela dépend de combien vous voulez "pousser" la colonne vers la droite. S'il n'y a pas d'autres colonnes à droite de col-md-4 il ira jusqu'au bout du row. Fondamentalement, offset était pertinent pour les colonnes flottantes, mais n'est plus pertinent maintenant que Bootstrap 4 est flexbox.

Si vous souhaitez déplacer le col-md-4 sur seulement 2 unités de colonne, la meilleure façon serait d'utiliser une colonne factice/espace réservé ...

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

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

S'il existe d'autres col-md-4 à droite du premier, puis ml-auto et mr-auto fonctionnerait pour centrer les deux colonnes ...

<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 vous souhaitez centrer le col-md-4 puis utilisez simplement mx-auto à créer des marges égales des deux côtés .

Remarque: la colonne spécifique ( les décalages seront restaurés à partir de la Bêta 2

31
Zim

En changeant

offset-md-2

à:

col-md-offset-2

Travaillé pour moi

4
clamchoda

ml-md-auto définit margin-left: auto; pour les tailles md et plus.

Vous ne pouvez pas définir cela sur quelque chose comme 2.

Tu as besoin de faire ml-md-auto.

1
Oliver Ni