Bootstrap Pull-rechts funktioniert nicht wie erwartet

Question

Einfache Frage hier mit Bootstrap3. Ich wollte eine Art kleinen Filter erstellen, der die Seite darunter neu lädt. Meine Anforderung war align dieser Filter (zwei Eingänge und eine kleine Taste) mit dem Inhalt darunter sitzen, so dass es fallen auf die hellste mögliche Position.

Ich versuchte mit pull-right Klasse und in der Tat zog es den Filter richtig, aber es gibt noch mehr Platz zu füllen. Wenn Sie das unten angegebene Beispiel überprüfen, werden Sie sehen, dass mein Ziel ist, die Schaltfläche mit der rechten Seite der lila Zeile auszurichten, aber es schlägt fehl.

Ich verstehe nicht wirklich, warum das passiert, aber ich nehme an, dass es zu einigen Margin/Padding-Probleme mit den Zeilen verwandt ist .. Ich bin auf der Suche nach einer Antwort, warum dies passiert, damit ich das Problem verstehen und gewinnen kann geh nicht wieder damit um :).

Sie können meine Auszeichnungs hier prüfe ich werde mein Markup schreiben by clicking here on bootply

auch:

wird

<div class="container"> 
    <div class="row" style="background:slateblue;"> 
    <div class="col-xs-12"> 
    <form role="form" class="form-horizontal"> 
      <div class="form-group pull-right"> 
       <div class="col-xs-4"> 
         <input type="text" class="form-control text-center"> 
       </div> 
       <div class="col-xs-4"> 
         <input type="text" class="form-control text-center"> 
       </div> 
       <div class="col-xs-2 col-sm-2" style="margin-top:3px;"> 
         <button type="submit" class="btn btn-success"> 
          <span class="glyphicon glyphicon-refresh"></span> 
         </button> 
       </div> 
      </div> 
     </form> 
     </div><!-- main col 12--> 
    </div><!--row--> 
    <div class="row" style="background:slategrey; height:200px;"> 
    </div> 
</div> 

Answer 1

Ihre Form-Gruppe so weit nach rechts wie möglich ausgerichtet ist - aber der Inhalt innerhalb es nicht ist. Sie haben nur 4 + 4 + 2 breite Spalten darin, so dass Sie "zwei Spalten kurz" sind, in dem 12-Spalten-Raster, das von Bootstrap verwendet wird.

Vielleicht möchten Sie einfach die erste von denen um 2 versetzten, indem Sie col-xs-offset-2 Klasse hinzufügen - dann sollte die Ausrichtung näher an dem sein, was Sie erreichen möchten.

Answer 2

Bootstrap-Spalten-Layout geteilt grundsätzlich die Zeile in 12 Spalten. Hier definieren Sie nur 10 der zwölf Spalten, weshalb Sie links noch Platz haben.

Versuche

<div class="form-group pull-right"> 
       <div class="col-xs-4 col-xs-offset-2"> 
         <input type="text" class="form-control text-center"> 
       </div> 
       <div class="col-xs-4"> 
         <input type="text" class="form-control text-center"> 
       </div> 
       <div class="col-xs-2 col-sm-2" style="margin-top:3px;"> 
         <button type="submit" class="btn btn-success"> 
          <span class="glyphicon glyphicon-refresh"></span> 
         </button> 
       </div> 
      </div> 

Answer 3

Bootstrap Verwendet eine 12-Säule Raster:

http://getbootstrap.com/css/#grid (Worth the read)

Um sicherzustellen, dass Sie nicht über diesen weißen Raum, den Sie brauchen, haben alle Spalten mit bis werden, wie ich sehen kann Sie sind nicht

Hier ist, wie ich Ihren Code tun würde:

<div class="container"> 
    <div class="row" style="background:slateblue;"> 
     <div class="col-xs-12"> 
      <form role="form" class="form-horizontal"> 
       <div class="form-group"> 
        <div class="col-xs-5"> 
          <input type="text" class="form-control text-center"> 
        </div> 
        <div class="col-xs-5"> 
          <input type="text" class="form-control text-center"> 
        </div> 
        <div class="col-xs-2 col-sm-2" style="margin-top:3px;"> 
          <button type="submit" class="btn btn-success"> 
           <span class="glyphicon glyphicon-refresh"></span> 
          </button> 
        </div> 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 

Answer 4

Für diejenigen, die verwenden bootstrap4:

Klassen für responsive floats und entfernt .pull-left und .pull-right , da sie redundant zu .float-left und .float-right sind.

Weitere Informationen von Bootstrap4 Migrations Hinweise: Here