Bootstrap 4: col aligner à droite
j'essaie de créer une ligne avec 2 cols. Une colonne à gauche avec son contenu aligné à gauche, et la deuxième colonne avec son contenu aligné à droite (ancienne pull-right).
Comment dois-je m'y prendre dans alpha-6?
j'ai essayé quelques petites choses, mais c'est ce que j'ai jusqu'à présent. Ce qui me manque?
<div class="row">
<div class="col">left</div>
<div class="col ml-auto">content needs to be right aligned</div>
</div>
2 réponses
Utiliser float-right pour les éléments de bloc, ou text-right pour les éléments en ligne:
<div class="row">
<div class="col">left</div>
<div class="col text-right">inline content needs to be right aligned</div>
</div>
<div class="row">
<div class="col">left</div>
<div class="col">
<div class="float-right">element needs to be right aligned</div>
</div>
</div>
http://www.codeply.com/go/oPTBdCw1JV
Si float-right ne fonctionne pas, rappelez-vous que Bootstrap 4 est maintenant flexbox, et beaucoup d'éléments sont display:flex qui peut prévenir float-right de travail.
dans certains cas, les classes d'utilité comme align-self-end ou ml-auto travailler à droite pour aligner les éléments qui sont à l'intérieur d'un conteneur flexbox comme le Bootstrap 4 .ligne, carte ou Nav. ml-auto (margin-left: auto) est utilisé dans un élément flexbox pour pousser les éléments vers la droite.
à Partir de la documentation, vous le faites de la forme:
<div class="row">
<div class="col-md-6">left</div>
<div class="col-md-push-6">content needs to be right aligned</div>
</div>