Bootstrap 4 richten Sie die Elemente direkt innerhalb eines div col

Meine Frage ist ziemlich einfach, aber ich finde nicht eine richtige Art und Weise (ich meine nicht die absolute positionsvorrichtung der sub-Elemente innerhalb einer relativen position-container) um dies zu erreichen in der Bootstrap-4.

Habe ich eine Zeile mit einem col-8 und col-4. Mein Gehalt in col-4 richtig sein muss so ausgerichtet sein Inhalt wird am rechten Rand.

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

Hier ist ein codepen:

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

Möchte ich meine beiden Schaltflächen rechts ausrichten innerhalb der col-4.

Wie in der Bootstrap-4 richtig auszurichten rechten Elemente innerhalb einer col?

InformationsquelleAutor BlackHoleGalaxy | 2017-03-31

  1. 13

    Verwenden ml-auto , drücken Sie die Tasten auf der rechten Seite...

    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>

    Andere option ist, um das btn-group von der col-md-4, und dann float-right wie erwartet funktionieren wird. Die pull-right Klasse wurde ersetzt durch float-right in der Bootstrap-4.

    <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 Zu verhindern, dass die horizontale Bildlaufleiste sichtbar in Ihrem Codepen, stellen Sie sicher, dass die .row sich innerhalb einer container-fluid. Auch in der Regel col-* werden verwendet, um Inhalte enthalten, und sollte nicht angewendet werden, um andere Komponenten/Elemente. So, zum Beispiel, wenn Sie wollen, verwenden 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: Rechts ausrichten-element im div-Klasse mit bootstrap 4

    InformationsquelleAutor Zim

  2. 4

    Den btn-groupKlasse in dieser md-4 macht, dass DIV ein flex-container, so dass eine regelmäßige text-right Klasse für die Ausrichtung funktioniert nicht. Fügen Sie stattdessen justify-content: flex-end; in einem style-Attribut:

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

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

    (Hinweis: ich löschte die p tag in das DIV)

    InformationsquelleAutor Johannes

  3. 3

    Gibt es ein paar Probleme mit dem markup versehen, das macht das layout seltsam Aussehen. @ZimSystem menioned die .container-fluid aber auch, dass sollten Sie immer eine div.col innerhalb einer .row so dass Sie die gleiche Art von Polsterung an den Rändern.

    Brauchen Sie nicht eine <p> rund um die Tasten herum. Die Ausrichtung fügen Sie einfach .ml-auto auf den ersten button wie dieser:

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

    InformationsquelleAutor Killerpixler

Schreibe einen Kommentar