Tous les vols

Question

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>
 

Answer 1

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 n'est pas de travail, rappelez-vous que Bootstrap 4 est maintenant flexbox, et de nombreux éléments sont display:flex ce qui peut empêcher float-right de travail.

Dans certains cas, l'utilité des classes comme l' align-self-end ou ml-auto travail à droite aligner les éléments qui sont à l'intérieur d'un flexbox conteneur comme le Bootstrap 4 .ligne, ou de la Carte de Nav. L' ml-auto (margin-left:auto) est utilisé dans un flexbox élément de pousser les éléments à droite.

Bootstrap 4 aligner à droite des exemples

Answer 2

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>
 

Answer 3

Dans 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