web-dev-qa-db-fra.com

Comment définir un bouton aligner à droite avec Bootstrap?

Je suis en train d'apprendre Bootstrap. La structure est un conteneur dans un certain contexte. Au bas du conteneur, je mets un bouton à côté d'une description.

Maintenant, je veux mettre le bouton aligner à droite sans casser la structure de bootstrap . Que dois-je faire? J'avais réglé le style "float: right" sur le style du bouton, mais il semblait incorrect .. .. Le bouton est en dehors du fond "alerte-info" et n'est pas aligné verticalement. Une meilleure méthode?

<div class="alert alert-info">
<a href="#" class="alert-link">Summary:Its some description.......testtesttest</a>  
<button type="button" class="btn btn-primary btn-lg" style="float:right;">Large      button</button>
 </div>
csstwitter-bootstrap
44
user2837851

Ajoutez simplement un simple pull-right class au bouton et assurez-vous que le conteneur div est clearfixed:

<div class="alert alert-info clearfix">
    <a href="#" class="alert-link">Summary:Its some description.......testtesttest</a> 
    <button type="button" class="btn btn-primary btn-lg pull-right">Large button</button>
</div>
92
Gabriel C. Troia

Essaye ça:

<div class="row">
<div class="alert alert-info" style="min-height:100px;">
    <div class="col-xs-9">
        <a href="#" class="alert-link">Summary:Its some
           description.......testtesttest</a>  
    </div>
    <div class="col-xs-3">
        <button type="button" class="btn btn-primary btn-lg">Large      button</button>
    </div>
 </div>
</div>

Démo:

http://jsfiddle.net/Hx6Sx/1/

2
Anam
<div class="container">
    <div class="btn-block pull-right">
        <a href="#" class="btn btn-primary pull-right">Search</a>
        <a href="#" class="btn btn-primary pull-right">Apple</a>
        <a href="#" class="btn btn-primary pull-right">Sony</a>
    </div>
</div>
0
Anuruddha Thennakoon
function Continue({show, onContinue}) {
  return(<div className="row continue">
  { show ? <div className="col-11">
    <button class="btn btn-primary btn-lg float-right" onClick= {onContinue}>Continue</button>
    </div>
    : null }
  </div>);
}
0
Vivek Ramasamy