web-dev-qa-db-fra.com

Bouton d'alignement à droite

Je sais que cela doit être très simple, mais j'essaie de définir un bouton à droite de la fenêtre en utilisant uniquement les classes bootstrap 4. Il doit être dans la même ligne que le texte.

<html>
<head>
</head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <body>
        <div class="row">
            <h3 class="one">Text</h3>
            <button class="btn btn-secondary pull-right">Button</button>
        </div>
    </body>
</html>

Le code est dans ici

cssbootstrap-4
24
jecabeda

Bootstrap 4 utilise .float-right par opposition à .pull-right dans Bootstrap 3. N'oubliez pas non plus d'imbriquer correctement vos lignes avec des colonnes.

<div class="row">
    <div class="col-lg-12">
        <h3 class="one">Text</h3>
        <button class="btn btn-secondary float-right">Button</button>
    </div>
</div>
52
Serg Chernata
<div class="container-fluid">
  <div class="row">
    <h3 class="one">Text</h3>
    <button class="btn btn-secondary ml-auto">Button</button>
  </div>
</div>

.ml-auto est le moyen d’aligner les éléments non flexbox de Bootstraph 4. 

5
Killerpixler

Si vous ne voulez pas utiliser float, la méthode la plus simple et la plus propre consiste à utiliser une colonne de largeur automatique:

<div class="row">
  <div class="col">
    <h3 class="one">Text</h3>
  </div>
  <div class="col-auto">
    <button class="btn btn-secondary pull-right">Button</button>
  </div>
</div>
1
josemmo

Vous pouvez également utiliser comme ci-dessous le code.

<button style="position: absolute; right: 0;">Button</button>
0
Ankr