Bootstrap 4 float-droit à l'intérieur .ligne

Je suis nouveau sur Bootstrap 4 et ne pouvez pas sembler obtenir float-droit sur un col div travail au sein d'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, il fonctionne très bien sans la ligne comme un div parent, mais j'aimerais utiliser la ligne. Ai-je raté quelque chose?

Merci
🙂

Il y a 8 réponses soumises. N'oubliez pas d'accepter une réponse si cela résout votre problème.

InformationsquelleAutor Zazz Blammymatazz | 2018-01-15

16

Bootstrap 4 a intégré Flexbox pour leurs mises en page. Vous pouvez obtenir le résultat souhaité par l'ajout de la classe de justifier-contenu-end pour le conteneur parent.

HTML:
```
<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 voulez apprendre les bases de la Flexbox, je vous recommandons de vérifier cela amusant et rapide tutoriel: http://flexboxfroggy.com/. C'est un excellent système, mais il n'est pas pris en charge dans IE (IE 9 et les versions antérieures).

InformationsquelleAutor Soren Baird
11

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

Voici l'exemple:

HTML:
```
<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 l'officiel docuemtation lien et exemple:
https://getbootstrap.com/docs/4.0/utilities/flex/#auto-margins

Pour les cas comme lorsque flex conteneur n'est pas utilisé, vous pouvez utiliser float-right qui est l'équivalent de pull-right dans les versions précédentes.

Il y a aussi un utilitaire Justifier Le Contenu pour modifier l'alignement des éléments dans le conteneur flex.
- Merci à vous! "ml-auto mr-3" était la seule chose qui a réussi à "flotté" mon contenu à l'intérieur de la div, à l'intérieur d'un rang, à droite
InformationsquelleAutor Jainik

Si tout ce que vous voulez est de "tirer" la colonne à droite, vous pouvez utiliser un "offset". Puisque vous utilisez col-md-8, ajouter offset-md-4.

HTML:

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

InformationsquelleAutor Sébastien

1

Soren est correct. Bootstrap 4 utilise flex zone. Flotteurs coincé! 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>
```
De Pull à droite est un bootstrap 3 tag.
- Sage réponse. Je vous remercie.
InformationsquelleAutor Henry Nox Richardson

Ce que vous pourriez 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.

InformationsquelleAutor Isham Sally

Permanent à bootstrap, documentation vous devez utiliser ml-auto classe sur le col que vous souhaitez être placé sur la droite.

De cette façon (regardez l'exemple), vous pouvez avoir seulement l'élément que vous souhaitez sur le droit, alors que tous les autres cols seront toujours sur l'écoulement naturel (sur la gauche).

HTML:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
  <div class="row">
    <div class="col-3 border border-primary">
      One 
    </div>
    <div class="col-3 border border-primary">
      Two
    </div>
    <div class="col-3 border border-success ml-auto">
      Three
    </div>
  </div>
</div>

InformationsquelleAutor GiuServ

-1

Pour cshtml pages avec bootstrap utilisation ci-dessous

@Html.ActionLink("Retour","Index","Contrôleur",null, new { @class="btn btn-warning"})

@Html.ActionLink("Nouvelle création", "Créer", "Contrôleur", null, new { @class = "btn btn-primary" })

InformationsquelleAutor Siddhartha

-1

Bootstrap 4 utilise flexbox. Vous pouvez résoudre ce problème en remplaçant "justifier-contenu-fin" au lieu de "flotter à droite".

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

InformationsquelleAutor Sapna Patidar

Vous devez vous connecter pour publier un commentaire.