【问题标题】：How right align bootstrap form button?如何正确对齐引导表单按钮？
【发布时间】：2018-11-03 00:32:13
【问题描述】：

请告诉我如何使用引导程序右对齐此表单“登录”按钮。我厌倦了使用 pull-right 类。但是调整大小后我的按钮位置不正确。

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

【问题讨论】：

你试过pull-right这门课吗？
是的，但是完成后，按钮会关闭
我在调整浏览器大小时没有发现任何问题。检查这里。 jsbin.com/cajogozetewi/1

标签： css twitter-bootstrap

【解决方案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>

【讨论】：

我支持这个。使用pull-right 浮动元素通常会导致不良布局问题。
text-right 适用于引导表单，而 pull-right 会将按钮放在表单之外，因此如果表单有 bkg，按钮将在该 bkg 之外

【解决方案2】：

pull-right 工作正常

DEMO

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

【讨论】：

【解决方案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>

希望对您有所帮助。

【讨论】：