Bootstrap 4 align Elemente rechts in einem col div

Question

Meine Frage ist ziemlich einfach, aber ich finde keinen richtigen Weg (ich meine nicht absolute Positionierung von Unterelementen in einem relativen Position Container), um dies in Bootstrap 4 zu erreichen.

ich habe eine Reihe mit einer col-8 und einer col-4. Mein Inhalt in Spalte 4 muss rechtsbündig sein, so dass der Inhalt am rechten Rand ist. Hier

<h1 class="col-md-8">Applications portfolio</h1> 

    <div class="btn-group col-md-4" role="group"> 
    <p class="float-right"> 
     <a class="btn btn-secondary btn-md" href="#"> 
     <i class="fa fa-plus" aria-hidden="true"></i> Creation</a> 
     <a class="btn btn-md btn-secondary" href="#"> 
     <i class="fa fa-flag" aria-hidden="true"></i> Report</a> 
    </p> 
    </div> 

ist ein codepen:

https://codepen.io/anon/pen/QpzVgJ

Ich möchte, dass meine zwei Tasten nach rechts innerhalb der col-4 auszurichten.

Wie in Bootstrap 4 richtig richtigen Elemente innerhalb einer Spalte ausrichten?

Answer 1

Verwenden ml-auto die Tasten nach rechts zu schieben ...

https://codepen.io/anon/pen/evbLQN

<div class="btn-group col-md-4" role="group"> 
    <p class="ml-auto"> 
     <a class="btn btn-secondary btn-md" href="#"> 
     <i class="fa fa-plus" aria-hidden="true"></i> Creation</a> 
     <a class="btn btn-md btn-secondary" href="#"> 
     <i class="fa fa-flag" aria-hidden="true"></i> Report</a> 
    </p> 
</div> 

Eine weitere Option ist die btn-group vom col-md-4, zu entfernen und dann float-right arbeiten als erwartet. Die pull-right Klasse wurde 4.

von float-right in Bootstrap ersetzt

<section class="row"> 
    <h1 class="col-md-8">Applications portfolio</h1> 

    <div class="col-md-4" role="group"> 
    <p class="float-right"> 
     <a class="btn btn-secondary btn-md" href="#"> 
     <i class="fa fa-plus" aria-hidden="true"></i> Creation</a> 
     <a class="btn btn-md btn-secondary" href="#"> 
     <i class="fa fa-flag" aria-hidden="true"></i> Report</a> 
    </p> 
    </div> 
</section> 

---

PS - Um die horizontale Bildlaufleiste sichtbar in Ihrem Codepen zu verhindern, stellen Sie sicher, dass die .row in einem container-fluid platziert wird. Auch allgemeincol-* werden verwendet, um Inhalte zu enthalten, und sollte nicht auf andere Komponenten/Elemente angewendet werden. So zum Beispiel, wenn Sie die btn-group ..

<div class="container-fluid"> 
    <section class="row"> 
     <div class="col-md-8"> 
      <h1>Applications portfolio</h1> 
     </div> 
     <div class="col-md-4"> 
      <div class="btn-group float-right mt-2" role="group"> 
       <a class="btn btn-secondary btn-md" href="#"> 
        <i class="fa fa-plus" aria-hidden="true"></i> Creation</a> 
       <a class="btn btn-md btn-secondary" href="#"> 
        <i class="fa fa-flag" aria-hidden="true"></i> Report</a> 
      </div> 
     </div> 
    </section> 
</div> 

http://www.codeply.com/go/8OYDK5D8Db

---

Verwandte nutzen wollen: Right align element in div class with bootstrap 4

Answer 2

Die btn-group Klasse, dass md-4 macht, dass DIV einen Flex Behälter, so eine reguläre text-right Klasse für die Ausrichtung wird nicht funktionieren. Stattdessen fügen justify-content: flex-end; in einem Stil-Attribute, um es:

<div class="btn-group col-md-4 text-right" role="group" style="justify-content: flex-end;"> 

https://codepen.io/anon/pen/RpEYEM

(Anmerkung: Ich habe den p-Tag in diesem DIV gelöscht)

Answer 3

Es gibt ein paar Probleme mit dem Markup vorausgesetzt, dass Marken das Layout sieht seltsam aus. @ZimSystem menioned die .container-fluid aber auch, dass man immer ein div.col in einem .row haben sollte, so dass Sie die gleiche Art von Polsterung an den Kanten zu bekommen.

Sie brauchen keine <p> um die Tasten.Um die Ausrichtung einfach .ml-auto auf den ersten Knopf wie folgt hinzufügen:

<div class="container-fluid"> 
<section class="row mb-2 mt-2"> 
    <h1 class="col-md-8">Applications portfolio</h1> 

    <div class="btn-group col-md-4" role="group"> 
     <a class="btn btn-secondary btn-md ml-auto" href="#"> 
     <i class="fa fa-plus" aria-hidden="true"></i> Creation</a> 
     <a class="btn btn-md btn-secondary" href="#"> 
     <i class="fa fa-flag" aria-hidden="true"></i> Report</a> 
    </div> 
</section> 

<section class="row" style="background-color: grey; height: 50px; overflow:hidden;"> 
    <div class="col"> 
    <p>Just a simple reference block to see the 100% width</p> 
    </div> 
</section> 
</div>