Wie positioniere ich eine Bootstrap btn-Gruppe am Ende einer Seite?

Question

Hier ist der Code:

<div class="row"> 
    <div class="col-xs-push-1 col-xs-10 col-sm-4"> 
     <form onsubmit="return false"> 
      ... 
     </form> 
    </div> 
    <div class="col-xs-11 col-xs-push-1 col-sm-6 buttons text-center"> 
     <div class="btn-group"> 
      ... 
     </div> 
    </div> 
</div> 

Also, ich habe eine Bootstrap-Zeile, in einer Form 4 Spalten (Tablette oder größerer Bildschirm) führt und eine Tastengruppe aufgreift 6 Spalten der Zeile. Die Schaltflächengruppe wird automatisch oben auf der rechten Seite der Zeile angezeigt, und ich möchte, dass sie sich am unteren Rand der rechten Seite der Zeile befindet. Ich habe versucht, den folgenden CSS-Code (wo 'Tasten' der übergeordnete div der Knopfgruppe ist), aber es hat nicht funktioniert:

.buttons{ 
    position: absolute; 
} 
.btn-group{ 
    position: relative; 
    bottom: 0; 
    right: 0; 
} 

Answer 1

Sie sollten die BTN-Gruppe geben:

.btn-group{ 
    position: absolute; 
    bottom: 0; 
    right: 0; 
} 

und sicher sein, dass die Mutter div.buttons hat ein:

.buttons{ 
    position: relative; 
} 

auch Angabe der Eltern .row:

.row{ 
    display:flex; 
} 

Answer 2

Es sollte anders sein, um:

.buttons (der Behälter) relativ Lage haben muss;

.btn-Gruppe (die innere div) benötigt absolute Lage zu haben.

Stellen Sie außerdem sicher, dass der Container die richtige Höhe hat.

By the way, ein andere Technik ein inneres div an der richtigen Stelle (unten in Ihrem Beispiel) einen äußeren div zu positionieren, CSS wird mit‘vertical-align Eigenschaft (dachte weitere Änderungen erforderlich sein würde, es google).