web-dev-qa-db-fra.com

Aligner à gauche et aligner à droite dans div dans Bootstrap

Quels sont certains des moyens habituels d'aligner à gauche du texte et d'aligner à droite un autre texte dans un conteneur div dans bootstrap?

par exemple.

Total cost                   $42

Le coût total ci-dessus doit être aligné à gauche et $ 42 à droite.

twitter-bootstrapuser-interfacebootstrap-4
224
user462455

Mise à jour de 2018 ...

Bootstrap 4.1 +

  • pull-right est maintenant float-right
  • text-right est identique à 3.x et fonctionne pour les éléments en ligne
  • float-* et text-* sont tous deux réactif pour un alignement différent selon la largeur (c.-à-d.: float-sm-right)

La flexbox utils (par exemple: justify-content-between) peut également être utilisée pour l'alignement:

<div class="d-flex justify-content-between">
      <div>
         left
      </div>
      <div>
         right
      </div>
 </div>

ou, des marges automatiques (par exemple: ml-auto) dans n'importe quel conteneur flexbox (ligne, barre de navigation, carte, d-flex, etc ...)

<div class="d-flex">
      <div>
         left
      </div>
      <div class="ml-auto">
         right
      </div>
 </div>

Démonstration de Bootstrap 4 Align
exemples de Bootstrap 4 Right Align (float, flexbox, text-right, etc ...)

Bootstrap 3

Utilisez la classe pull-right ..

<div class="container">
  <div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6"><span class="pull-right">$42</span></div>
  </div>
</div>

Démo de Bootstrap

Vous pouvez également utiliser la classe text-right comme ceci:

  <div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6 text-right">$42</div>
  </div>

Bootstrap 3 Demo 2

510
Zim

Au lieu d'utiliser pull-right class, il est préférable d'utiliser text-right class dans la colonne, car pull-right crée parfois des problèmes lors du redimensionnement de la page.

55
Arun Agarwal

Dans Bootstrap 4, la bonne réponse consiste à utiliser la classe text-xs-right.

Cela fonctionne parce que xs indique la plus petite taille de fenêtre d'affichage dans BS. Si vous le souhaitez, vous pouvez appliquer l'alignement uniquement lorsque la fenêtre d'affichage est de taille moyenne ou supérieure en utilisant text-md-right.

Dans le dernier alpha, text-xs-right a été simplifié à text-right.

<div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6 text-right">$42</div>
</div>
14
Erik Berkun-Drevnig

Bootstrap v4 introduit le support de flexbox

<div class="d-flex justify-content-end">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

En savoir plus sur https://v4-alpha.getbootstrap.com/utilities/flexbox/

9
William Entriken

Nous pouvons atteindre par Bootstrap 4 Flexbox:

<div class="d-flex justify-content-between w-100">
<p>TotalCost</p> <p>$42</p>
</div>

d-flex // Display Flex
justify-content-between // justify-content:space-between
w-100 // width:100%

Exemple: JSFiddle

2
pradeep kumar
<div class="row">
  <div class="col-xs-6 col-sm-4">Total cost</div>
  <div class="col-xs-6 col-sm-4"></div>
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">$42</div>
</div>

Cela devrait faire le travail juste ok

1
Terrymight