it-swarm.com.de

Wie kann ich einen Button mit Bootstrap ausrichten?

Ich lerne Bootstrap. Die Struktur ist ein Container in einem bestimmten Kontext. Am unteren Rand des Containers füge ich eine Schaltfläche neben einer Beschreibung ein.

Jetzt möchte ich die Schaltfläche nach rechts ausrichten, ohne die Bootstrap-Struktur zu unterbrechen. Was soll ich tun? Ich hatte "float: right" auf die Schaltfläche "style" gesetzt, aber es schien schlecht. Die Schaltfläche befindet sich außerhalb des "alert-info" - Hintergrunds und ist nicht vertikal ausgerichtet. Gibt es eine bessere Methode?

<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>
44
user2837851

Fügen Sie der Schaltfläche einfach eine einfache pull-right -Klasse hinzu, und stellen Sie sicher, dass der Container div gelöscht ist:

<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

Versuche dies:

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

Demo:

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