Bootstrap 4 aligner les éléments à l'intérieur d'un col div

Ma question est assez simple mais je ne trouve pas une façon correcte (je veux dire de ne pas utiliser le positionnement absolu des sous-éléments à l'intérieur d'une position relative conteneur) d'atteindre cet objectif dans le Bootstrap 4.

J'ai une ligne avec un col-8 et un col-4. Mon contenu dans le col-4 doit être aligné à droite de sorte que son contenu est à la droite de la bordure.

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

Ici est un codepen:

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

Je veux que mes deux boutons pour aligner à droite dans le col-4.

Comment dans le Bootstrap de 4 à aligner correctement les éléments à l'intérieur d'un col?

InformationsquelleAutor BlackHoleGalaxy | 2017-03-31

Utilisation ml-auto à appuyer sur les boutons vers la droite...

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>

Une autre option est de supprimer l' btn-group de la col-md-4, puis float-right fonctionnera comme prévu. Le pull-right classe a été remplacé par float-right dans le 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 - Pour empêcher la barre de défilement horizontale visible dans votre Codepen, assurez-vous que le .row est placé à l'intérieur d'un container-fluid. Aussi, généralement col-* sont utilisés pour contenir le contenu, et ne doit pas être appliquée à d'autres composants/éléments. Ainsi, par exemple, si vous voulez utiliser le 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

Connexes: Aligner à droite élément div class avec bootstrap 4

InformationsquelleAutor Zim

4

La btn-groupclasse que le md-4 en fait qu'un DIV conteneur flex, de manière régulière text-right classe pour l'alignement ne fonctionne pas. Au lieu de cela, ajouter justify-content: flex-end; dans un attribut style à elle:
```
<div class="btn-group col-md-4 text-right" role="group" style="justify-content: flex-end;">
```
https://codepen.io/anon/pen/RpEYEM

(note: j'ai effacé le p à l'intérieur de la balise DIV)

InformationsquelleAutor Johannes

Il y a quelques problèmes avec le balisage condition qui rend la mise en page est bizarre. @ZimSystem menioned la .container-fluid mais aussi que vous devriez toujours avoir une div.col à l'intérieur d'un .row de sorte que vous obtenez le même genre de rembourrage sur les bords.

Vous n'avez pas besoin d'un <p> autour des boutons. Pour obtenir l'alignement simplement ajouter .ml-auto pour le premier bouton comme ceci:

<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

Vous devez vous connecter pour publier un commentaire.