web-dev-qa-db-fra.com

Aligner div à droite dans Bootstrap 3

Existe-t-il un moyen dans Bootstrap 3 d'aligner à droite un div?

Je suis conscient des possibilités de compensation mais je souhaite aligner un div mis en forme à droite de son conteneur, alors qu'il devrait être centré dans une vue mobile en pleine largeur. La classe 'tirer à droite' ne fonctionne plus. Ont-ils oublié de le remplacer ou manque-t-il quelque chose d'évident?

<div class="row">
  <div class="container">
    <div class="col-md-4">
      left content
    </div>
    <div class="col-md-4 col-md-offset-4">
      <!-- The next div has a background color and its own paddings and should be aligned right-->
      <!-- It is now in the right column but aligned left in that column -->
      <div class="yellow_background">right content</div>
    </div>
  </div>
</div>

Shure, je sais comment faire cela en CSS, mais peut-on le faire en pure bootstrap 3?

htmlcsstwitter-bootstrap-3
45
Klaaz

La classe pull-right est toujours là dans Bootstrap 3 Voir le 'helper classes' here

pull-right est défini par

.pull-right {
  float: right !important;
}

sans plus d'informations sur les styles et le contenu, c'est difficile à dire.

Il tire certainement droit dans ce JSBIN lorsque la page est plus large que 990px ​​- ce qui correspond au moment où le style col-md entre en jeu, Bootstrap 3 étant d'abord mobile, puis tout.

54
JasonB

Voulez-vous dire quelque chose comme ça:

HTML

<div class="row">
  <div class="container">

    <div class="col-md-4">
      left content
    </div>

    <div class="col-md-4 col-md-offset-4">

      <div class="yellow-background">
        text
        <div class="pull-right">right content</div>  
      </div>

    </div>
  </div>
</div>

CSS

.yellow-background {
  background: blue;
}

.pull-right {
  background: yellow;
}

Un exemple complet peut être trouvé sur Codepen .

44
Eric Geurts

je pense que vous essayez d’aligner le contenu à droite dans la div, la div avec offset déjà. Poussez-vous à droite, ici du code et exemple LIVE :
FYI: .pull-right seulement Poussez la div à droite, mais pas le contenu à l'intérieur de la div.

HTML:

_<div class="row">
  <div class="container">
    <div class="col-md-4 someclass">
      left content
    </div>
    <div class="col-md-4 col-md-offset-4 someclass">
      <div class="yellow_background totheright">right content</div>
    </div>
  </div>
</div>
_

CSS:

_.someclass{ /*this class for testing purpose only*/
    border:1px solid blue;
    line-height:2em;
}

.totheright{ /*this will align the text to the right*/
  text-align:right;
}

.yellow_background{
    background-color:yellow;
}
_

Une autre modification:

_...
<div class="yellow_background totheright">
  <span>right content</span>
  <br/>image also align-right<br/>
  <img width="15%" src="https://www.google.com/images/srpr/logo11w.png"/>
</div>
...
_

j'espère que ça résoudra votre problème

4
xnome

Bootstrap 4 + a modifié les classes d’utilitaires à cet effet. De la documentation :

Ajout de .float-{sm,md,lg,xl}-{left,right,none} classes pour les flotteurs réactifs et suppression de .pull-left et .pull-right car elles sont redondantes pour .float-left et .float-right.

Utilisez donc le .float-right (ou un équivalent de taille tel que .float-lg-right) au lieu de .pull-right pour votre alignement à droite si vous utilisez une version plus récente de Bootstrap.

1
Voicu