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
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>
<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.
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>
Vous pouvez également utiliser comme ci-dessous le code.
<button style="position: absolute; right: 0;">Button</button>