如何正确对齐bootstrap表单按钮？

Question

请告诉我如何正确对齐此表格＆＃34;登录＆＃34;按钮使用bootstrap。我厌倦了使用拉右课。但调整大小后我的按钮位置不正确。

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

Answer 1

您可以先使用text-right，然后将其包裹在div中，如下所示：

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

LIVE-DEMO

这是完整的代码

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

Answer 2

pull-right工作正常

DEMO

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

Answer 3

如果您位于Bootstrap4中具有行和列的容器内，则所有浮动对象均无法正常工作。

相反，您必须添加一个间隔柱以使内容对齐。

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

希望有帮助。