Bouton aligner à droite

Question

Bouton aligner à droite

je sais que cela doit être très simple mais j'essaie de mettre un bouton à droite de la fenêtre en utilisant seulement bootstrap 4 classes. 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 ici

19

bootstrap-4 css

demandé sur TylerH 2017-01-27 16:12:44

7 réponses

score 43 · Answer 1

Bootstrap 4 utilise .float-right plutôt pour .pull-right dans Bootstrap 3. Aussi, n'oubliez pas de bien emboîter vos rangs 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>

score 4 · Answer 2

<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 la façon non-flexbox de Bootstraph 4 d'aligner les choses.

score 1 · Answer 3

si vous ne voulez pas utiliser float, la façon la plus facile et la plus propre de le faire est d'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>

score 0 · Answer 4

Vous pouvez aussi utiliser comme code ci-dessous.

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

score -1 · Answer 5

Vous pouvez utiliser le système de lignes et de colonnes pour faire quelque chose dans le sens de ce que vous demandez.

insérez trois colonnes à l'intérieur de la rangée vous avez votre texte et bouton à l'intérieur. Mettez les deux à class= "col-sm-1" et la colonne intérieure à class="col-sm-10"

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

ce n'est en aucun cas une bonne façon d'accomplir ce que vous voulez accomplir, mais cela fonctionne (en supposant que la taille de l'écran ne soit pas trop petite). système de grille est idéal pour structurer votre la page web.

Idéalement, vous devriez écrire votre propre CSS pour appuyer sur le bouton à droite de la page. Mais cette méthode fonctionnera si vous ne voulez pas le faire.

score -3 · Answer 6

Peut-être que vous pouvez utiliser float: right;:

.one {
  padding-left: 1em;
  text-color: white;
   display:inline; 
}
.two {
  background-color: #00ffff;
}
.pull-right{
  float:right;
}

<html>
<head>
 
  </head>
  <body>
      <div class="row">
       <h3 class="one">Text</h3>
       <button class="btn btn-secondary pull-right">Button</button>
    </div>
  </body>
</html>

score -3 · Answer 7

le fichier bootstrap 4.0.0 que vous recevez de cdn n'a pas de classe pull-right (ou pull-left). Le v4 est en alpha, donc il y a beaucoup de problèmes comme ça.

il y a 2 options:

1) l'Inverse de bootstrap 3.3.7

2) écrivez votre propre CSS.

Las etiquetas más populares

Bouton aligner à droite

7 réponses