web-dev-qa-db-fra.com

col aligner à droite

J'essaie de créer une ligne avec 2 colonnes. Un col à gauche avec son contenu aligné à gauche, et le second col avec son contenu aligné à droite (ancien pull-right).

Comment puis-je m'y prendre en alpha-6?

J'ai essayé plusieurs choses, mais c'est ce que j'ai jusqu'à présent. Qu'est-ce que je rate?

<div class="row">
    <div class="col">left</div>
    <div class="col ml-auto">content needs to be right aligned</div>
</div>
twitter-bootstrapbootstrap-4
35
Thibs

Utilisez 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 que de nombreux éléments sont display:flex, ce qui peut empêcher le fonctionnement de float-right.

Dans certains cas, les classes d’utilitaires telles que align-self-end ou ml-auto permettent d’aligner à droite les éléments situés dans un conteneur Flexbox comme Bootstrap 4 .row, Card ou Nav. Le ml-auto (margin-left: auto) est utilisé dans un élément flexbox pour pousser des éléments à droite.

Bootstrap 4 align right exemples

76
Zim

De la documentation, vous le faites comme:

<div class="row">
    <div class="col-md-6">left</div>
    <div class="col-md-Push-6">content needs to be right aligned</div>
</div>

Docs

2
Jordan.J.D

Que dis-tu de ça? Bootstrap 4

<div class="row justify-content-end">
    <div class="col-3">
        The content is positioned as if there was
        "col-9" classed div appending this one.
    </div>
</div>
1
Bexultan Myrzatayev