Form-Gruppe innerhalb einer form horizontal ist Überdehnungen vorherige form Gruppe

Question

Ich bin mit Bootstrap 3.3.6 Ich habe eine sehr einfache Form in einem Panel:

Es ist ziemlich einfach, aber die " Post "Button passt nicht gut.

, dass das HTML hinter der Form ist:

<div class="panel panel-primary"> 
    <div class="panel-heading">Say something...</div> 
    <div class="panel-body"> 
    <form class="form-horizontal"> 
     <div class="form-group"> 
     <div class="col-md-12"> 
      <textarea class="form-control" 
        rows="5" 
        placeholder="What are you up to?"></textarea> 
     </div> 
     </div> 
     <div class="form-group"> 
     <div class="col-md-offset-11 col-md-1"> 
      <button type="submit" class="btn btn-primary">Post</button> 
     </div> 
     </div> 
    </form> 
    </div> 
</div> 

Nach der Bootstrap-Dokumentation, verhält sich .form-Gruppe wie .row wenn innerhalb eines .form-horizontal - also die Taste (col-md-Offset-Kompensation -11) sollte den Button vertikal auf das Textfeld ausrichten.

Diese Platte in einer Reihe in einer anderen Seite geladen wird:

<div class="container"> 
    ... 
    <div class="row"> 
    <div class="col-md-offset-2 col-md-8"> 
     <div ui-view="quickPost"></div> 
    </div> 
    </div> 
    ... 

Als .form-Gruppe wie ein .row verhält, sollte es funktionieren, wenn in einem .row (es ist in Ordnung Reihen innerhalb Reihen zu wickeln).

Da ich nicht mit CSS und Bootstrap Erfahrung habe, bin ich ziemlich sicher, dass es eine dumme Aufsicht von meiner Seite ist. Kann irgendjemand erkennen, welchen Fehler ich gemacht habe?

Answer 1

Das Problem hier ist nicht genau mit Bootstrap Grid-System - es ist eigentlich, weil die Größe, die Sie für die Schaltfläche Post zugewiesen haben, einfach zu eng ist. (Es ist in einem col-md-1 in einem col-md-8, so wird es nur 1/12 * 8/12 = 5,5% der maximalen Breite von .container (1170px): ~ 65px, und das ist nicht einmal unter Berücksichtigung 15px padding.)

Dadurch wird die Schaltfläche (die nicht in eine neue Zeile springen kann, um in der schmalen Spalte zu bleiben) aus dem verfügbaren Platz überlaufen, was dazu führt, dass die Ausrichtung ausbleibt.

Sie können dieses Problem lösen in ein paar Möglichkeiten: Sie durch die Erhöhung der Anzahl der Spalten mehr Platz für die Taste zuweisen könnte es aufnehmen kann, haben dann die Taste, um 100% Breite erweitern Bootply example den rechten Rand zu berühren:

button { 
    width: 100%; 
} 

<!-- [...] --> 
    <div class="col-md-offset-10 col-md-2"> 
     <button type="submit" class="btn btn-primary">Post</button> 
    </div> 
<!-- [...] --> 

Oder Sie Bootstrap die pull-right Klasse nutzen die Taste bündig gegen die rechte Seite zu halten (an welchem ​​Punkt die Anzahl der Spalten, die Sie keine Rolle angeben werden, da sie keine Auswirkungen haben) Bootply example :

<!-- [...] --> 
    <div class="col-md-offset-11 col-md-1"> 
     <button type="submit" class="btn btn-primary pull-right">Post</button> 
    </div> 
<!-- [...] --> 

Hoffe, das hilft! Lass es mich wissen, wenn du irgendwelche Fragen hast.