web-dev-qa-db-fra.com

Comment aligner correctement le bouton de formulaire bootstrap?

S'il vous plaît dites-moi comment bien aligner ce formulaire "Log in" bouton en utilisant bootstrap. Je me suis fatigué d'utiliser la classe Pull-Right. Mais après avoir redimensionné, mon bouton n'est pas dans la bonne position.

<div role="form">
    <div class="form-group">
        <label>Username</label>
        <input type="text" class="form-control"/>
    </div>

    <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control"/>
    </div>

    <div class="checkbox">
        <label>
            <input type="checkbox"> Remember Me
        </label>
    </div>

    <button class="btn-info btn">Log in</button>                            
</div>
csscss3twitter-bootstrap
14
Nadishan

Vous pouvez utiliser text-right d’abord, vous devez l’envelopper dans un div comme ceci:

<div class="text-right">
     <button class="btn-info btn">Log in</button>
</div>

LIVE-DEMO

Voici le code complet

<div role="form">
    <div class="form-group">
        <label>Username</label>
        <input type="text" class="form-control"/>
    </div>

    <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control"/>
    </div>

    <div class="checkbox">
        <label>
            <input type="checkbox"/> Remember Me
        </label>
    </div>

    <div class="text-right"> <!--You can add col-lg-12 if you want -->
        <button class="btn-info btn">Log in</button>
    </div>
</div>

enter image description here

42
Gildas.Tambo

pull-right fonctionne bien

D&EACUTE;MO

<button class="btn-info btn pull-right">Log in</button>
11
Suganth G

Si vous êtes dans un conteneur avec des lignes et des colonnes dans Bootstrap4, tous les flottants ne fonctionnent pas correctement.

Au lieu de cela, vous devez ajouter une colonne d'espacement pour aligner les éléments.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<p>Float right demo inside a container-fluid, Bootstrap 4</p>
<div class="container-fluid">
  <div class="row">
    <div class="col bg-warning"></div><!-- This is the filler column -->
    <div class="col-auto bg-success">.col-auto (Like a Float Right)</div>
  </div>
</div>

J'espère que cela pourra aider.

0
phyatt