it-swarm.com.de

Wie kann man die Bootstrap-Schaltfläche rechts ausrichten?

Bitte sagen Sie mir, wie Sie die Schaltfläche "Anmelden" mithilfe von Bootstrap richtig ausrichten können. Ich habe es satt, Pull-Right zu verwenden. Nach der Größenänderung befindet sich mein Button jedoch nicht in der richtigen 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>
14
Nadishan

Sie können text-right zuerst verwenden, indem Sie es in eine div wie folgt verpacken:

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

LIVE-DEMO

Hier ist der vollständige Code

<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 funktioniert einwandfrei

DEMO

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

Wenn Sie sich in einem Container mit Zeilen und Spalten in Bootstrap4 befinden, funktionieren alle Floats nicht ordnungsgemäß.

Stattdessen müssen Sie eine Spacer-Spalte hinzufügen, um die Ausrichtung der Elemente zu ermöglichen.

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

Hoffentlich hilft das.

0
phyatt