web-dev-qa-db-fra.com

Twitter bootstrap float div right

Quelle est la bonne manière dans bootstrap de faire flotter une div à droite? Je pensais que pull-right était le moyen recommandé, mais cela ne fonctionnait 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>
htmlcsstwitter-bootstrap
140
Justin

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

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

Si vous voulez dire que vous voulez aligner le texte de la deuxième division span6 sur la droite, ajoutez-y simplement une nouvelle classe et attribuez-lui la valeur text-align: right, par exemple.

.myclass {
    text-align: right;
}

MISE À 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

83
Billy Moat

Pour faire flotter une div à droite pull-right est la méthode recommandée. Je pense que vous faites les choses correctement. Vous n'avez peut-être besoin que 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>
107
Amit

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

<div class="text-right">

alignera le texte à droite

<div class="pull-right">

tirera vers la droite tout le contenu non seulement le texte

78
ishimwe

Cela fait l'affaire, sans la nécessité 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 consiste à imbriquer un autre <div> avec la classe "pull-right". La combinaison des deux classes ne fonctionnera pas.

27
Bern
<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/[email protected]/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>
18
Kévin Berthommier

Vous pouvez affecter le nom de la classe comme text-center, left ou right. Le texte s'alignera en conséquence sur le nom de la classe. Vous n'avez pas besoin de faire un nom de classe supplémentaire séparément. Ces classes sont construites dans BootStrap 3 et bootstrap 4.

Bootstrap 3

Documents d'alignement de texte v

<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

documents d'alignement de 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>
3
Faisal