web-dev-qa-db-fra.com

Bootstrap 4 float-juste à l'intérieur .row

Je suis nouveau dans Bootstrap 4 et je ne peux pas sembler avoir une position flottante sur un col div fonctionnant dans une ligne. Voici mon code: 

<div class="row" >
<div class="col-md-8 float-right" style="border: 1px solid red;">
<h3>Five grid tiers</h3>
<p>Hi</p>

</div>
</div>

Bizarrement, cela fonctionne bien sans la ligne en tant que div parent, mais j'aimerais utiliser la ligne. Est-ce que je manque quelque chose? 

Merci:)

htmltwitter-bootstrapbootstrap-4
5
Zazz Blammymatazz

Bootstrap 4 a incorporé Flexbox pour leurs agencements. Vous pouvez obtenir le résultat souhaité en ajoutant la classe 'justifier-contenu-fin' au conteneur parent.

<div class="row justify-content-end" >
  <div class="col-md-8" style="border: 1px solid red;">
    <h3>Five grid tiers</h3>
    <p>Hi</p>
  </div>
</div>

Si vous souhaitez apprendre les bases de Flexbox, je vous recommande de consulter ce didacticiel rapide et amusant: http://flexboxfroggy.com/ . C'est un excellent système, même s'il n'est pas pris en charge dans Legacy IE (IE 9 et les versions antérieures). 

8
Soren Baird

row est un conteneur flex dans bootstrap-4. Pour aligner le contenu dans flex-container, vous devez utiliser ml-auto et mr-auto.

Voici l'exemple:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="row ml-1">
  <div>
     Hello from left
  </div>
  <div class="ml-auto mr-3">
     Hello from right
  </div>
</div>

Voici le lien officiel de documentation et l'exemple: https://getbootstrap.com/docs/4.0/utilities/flex/#auto-margins

Dans des cas comme lorsque flex container n’est pas utilisé, vous pouvez utiliser float-right, ce qui équivaut à pull-right dans les versions précédentes.

Il existe également un utilitaire Justify Content pour modifier l’alignement des éléments dans le conteneur flex.

2
Jainik

Si tout ce que vous voulez, c'est "tirer" la colonne à droite, vous pouvez utiliser un "décalage". Puisque vous utilisez col-md-8, ajoutez offset-md-4.

<div class="row">
  <div class="col-md-8 offset-md-4" style="border: 1px solid red;">
    <h3>Five grid tiers</h3>
    <p>Hi</p>

  </div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

1
Sébastien

Ce que tu pourrais essayer:

<div class="row float-right">
    <div class="col-md-8 float-right" style="border: 1px solid red;">
        <h3>Five grid tiers</h3>
        <p>Hi</p>
    </div>
</div>

Si vous utilisez bootstrap 3, vous devrez utiliser pull-right au lieu de float-right.

0
Isham Sally

Soren a raison. Bootstrap 4 utilise flex box. Les flotteurs sont bloqués! Essayez de les oublier! 

<div class="row justify-content-end">
  <div class="col-4"> One of two columns </div>
  <div class="col-4"> One of two columns </div>
</div>

Pull-right est une balise bootstrap 3. 

0
Henry Nox Richardson