Twitter bootstrap float div droite


142

Quelle est la bonne façon de bootstrapfaire flotter un div vers la droite? Je pensais que pull-rightc'était la méthode recommandée, mais cela ne fonctionne pas.

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 .container {
    margin-top: 10px;
}
<div class="container">
    <div class="row-fluid">
        <div class="span6">
            <p>Text left</p>
        </div>
        <div class="span6 pull-right">
            <p>text right</p>
        </div>
    </div>
</div>


Vous voulez faire flotter du texte ?? Regardez csstext-align
Ron van der Heijden

N'y a-t-il pas une méthode intégrée (standard) dans le bootstrap?
Justin le

Réponses:


85

Vous avez deux divs span6 dans votre ligne, ce qui prendra les 12 travées entières dont une ligne est composée.

L'ajout de pull-right à la deuxième div span6 ne va rien y faire car il est déjà assis à droite.

Si vous voulez dire que vous voulez que le texte du deuxième div span6 soit aligné à droite, ajoutez simplement une nouvelle classe à ce div et donnez-lui la valeur text-align: right par exemple

.myclass {
    text-align: right;
}

METTRE À JOUR:

EricFreese a souligné que dans la version 2.3 de Bootstrap (la semaine dernière), ils ont ajouté des classes utilitaires d'alignement de texte que vous pouvez utiliser:

  • .text-left
  • .text-center
  • .text-right

http://twitter.github.com/bootstrap/base-css.html#typography


5
On dirait qu'ils ont ajouté des classes d'utilitaires pour aligner le texte dans 2.3 : .text-left, .text-centeret.text-right
Eric Freese

1
@EricFreese - Vous avez raison - je n'avais pas remarqué cette mise à jour - j'ai mis à jour ma réponse.
Billy Moat

Cela ne devrait pas être la réponse acceptée. Il existe une classe d'amorçage intégrée appelée pull-right(crédit à @Amit); OMI, il est plus propre d'utiliser une classe Bootstrap intégrée ... et OP l'a demandé dans sa question
Kolob Canyon

107

Faire flotter un div vers la droite pull-rightest la méthode recommandée, je pense que vous faites les choses correctement, il vous suffit peut-être d'utilisertext-align:right;

  <div class="container">
     <div class="row-fluid">
      <div class="span6">
           <p>Text left</p>
      </div>
      <div class="span6 pull-right" style="text-align:right">
           <p>text right</p>
      </div>
  </div>
 </div>      
 </div>

malheureusement pull-rightétait obsolète avec la version 3.1: getbootstrap.com/components/#dropdowns-alignment
ılǝ

12
@ ılǝ "..nous avons abandonné .pull-right dans les menus déroulants ." Cela ne s'applique pas aux autres utilisations de l'extraction à droite.
user2864740

78

bootstrap 3 a une classe pour aligner le texte dans un div

<div class="text-right">

alignera le texte à droite

<div class="pull-right">

tirera vers la droite tout le contenu non seulement le texte


text-right, text-leftet text-centerfonctionne parfaitement. Et aligne le texte avec le conteneur en conséquence.
Anish Nair

merci @BojanKogoj, en effet pull-right était obsolète pour les menus déroulants dans la v 3.1: getbootstrap.com/components/#dropdowns-alignment
ılǝ

27

Cela fait l'affaire, sans avoir besoin d'ajouter un style en ligne

<div class="row-fluid">
    <div class="span6">
        <p>text left</p>
    </div>
    <div class="span6">
        <div class="pull-right">
            <p>text right</p>
        </div>
    </div>
</div>

La réponse est en imbriquant un autre <div>avec la classe "pull-right". Combiner les deux classes ne fonctionnera pas.


1
Cela devrait être la bonne réponse. Le but de Bootstrap est d'éviter d'avoir à traiter directement les styles.
Kristen Waite

18
<p class="pull-left">Text left</p>
<p class="text-right">Text right in same line</p>

Ce travail pour moi.

edit: Un exemple avec votre extrait:

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.css');
 .container {
    margin-top: 10px;
}
<div class="container">
    <div class="row-fluid">
        <div class="span6 pull-left">
            <p>Text left</p>
        </div>
        <div class="span6 text-right">
            <p>text right</p>
        </div>
    </div>
</div>


3

Vous pouvez attribuer le nom de la classe comme centre de texte, gauche ou droite. Le texte s'alignera en conséquence sur ces noms de classe. Vous n'avez pas besoin de créer un nom de classe supplémentaire séparément. Ces classes sont intégrées dans BootStrap 3 et bootstrap 4.

Bootstrap 3

Documentation sur l'alignement du texte v3

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Bootstrap 4

Documentation sur l'alignement du texte v4

<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.