Twitter bootstrap float div right

Question

Quelle est la bonne manière de bootstrap pour faire flotter un div vers la droite ? Je pensais pull-right était le moyen recommandé, mais ça ne marche 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>

Answer 1

Pour faire flotter un div vers la droite pull-right est le moyen recommandé, je pense que vous faites les choses correctement peut-être que vous avez seulement besoin d'utiliser text-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>

Answer 2

Vous avez deux divs span6 à l'intérieur de votre rangée, ce qui occupera les 12 espaces dont une rangée est constituée.

L'ajout de l'option pull-right à la deuxième div span6 n'y changera rien puisqu'elle est déjà placée à droite.

Si vous voulez que le texte de la deuxième division span6 soit aligné sur la droite, il suffit d'ajouter une nouvelle classe à cette division et de lui donner la valeur text-align : right, par exemple.

.myclass {
    text-align: right;
}

---

UPDATE :

EricFreese a signalé que la version 2.3 de Bootstrap (la semaine dernière) a ajouté des classes utilitaires d'alignement du texte que vous pouvez utiliser :

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

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

Answer 3

Bootstrap 3 a une classe pour aligner le texte dans un div.

<div class="text-right">

alignera le texte sur la droite

<div class="pull-right">

va tirer vers la droite tout le contenu, pas seulement le texte.

Answer 4

Cela fait l'affaire, sans qu'il soit nécessaire 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 se trouve dans l'imbrication d'un autre <div> avec la classe "pull-right". Combiner les deux classes ne fonctionnera pas.

Answer 5

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

Ça marche pour moi.

edit : Un exemple avec votre snippet :

@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>