web-dev-qa-db-fra.com

Bootstrap 4 aligner les éléments à l'intérieur d'une colonne div

Ma question est assez simple mais je ne trouve pas de moyen approprié (je veux dire de ne pas utiliser le positionnement absolu des sous-éléments dans un conteneur de position relative) pour y parvenir dans Bootstrap 4.

J'ai une rangée avec un col-8 et un col-4. Mon contenu dans col-4 doit être aligné à droite pour que son contenu soit à droite.

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

Voici un codepen:

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

Je veux que mes deux boutons s'alignent à droite dans le col-4.

Comment dans Bootstrap 4 pour aligner correctement les éléments droits dans un col?

csstwitter-bootstrapflexboxbootstrap-4twitter-bootstrap-4
10
BlackHoleGalaxy

Utilisez ml-auto pour pousser 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 consiste à supprimer le btn-group du col-md-4, puis float-right fonctionnera comme prévu. Le pull-right la classe a été remplacée par float-right dans 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é dans un container-fluid. Aussi, en généralcol-* sont utilisés pour contenir du contenu et ne doivent pas être appliqués à d'autres composants/éléments. Ainsi, par exemple, si vous souhaitez 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'élément dans la classe div avec bootstrap 4

15
Zim

Le btn-groupclass en ce que md-4 fait de ce DIV un conteneur flexible, donc un text-right classe pour l'alignement ne fonctionnera pas. Au lieu de cela, ajoutez justify-content: flex-end; dans un attribut de style:

<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é la balise p à l'intérieur de cette DIV)

4
Johannes

Il y a quelques problèmes avec le balisage fourni qui rendent la mise en page étrange. @ZimSystem a mentionné le .container-fluid mais aussi que vous devriez toujours avoir un div.col à l'intérieur d'un .row pour obtenir le même type de rembourrage sur les bords.

Vous n'avez pas besoin d'un <p> autour des boutons. Pour obtenir l'alignement, ajoutez simplement .ml-auto au premier bouton comme celui-ci:

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