如何将Bootstrap表单按钮右对齐？

Question

请告诉我如何使用Bootstrap使这个表单中的“登录”按钮右对齐。我尝试使用pull-right类，但在调整大小后，我的按钮位置不正确。

请告诉我如何使用Bootstrap使这个表单中的“登录”按钮右对齐。我尝试使用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>

- Nadishan

---

你尝试过使用 pull-right 类吗？ - Kheema Pandey

是的，但完成后，按钮会下降。 - Nadishan

我在调整浏览器大小时没有看到任何问题。请查看此处。http://jsbin.com/cajogozetewi/1 - Kheema Pandey

Answer 1

你可以使用 text-right，但首先需要像这样将其包装在一个 div 中：

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

演示

这是完整的代码

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

- Gildas.Tambo

---

我赞成这个观点。使用 pull-right 浮动一个元素往往会导致不良的布局问题。 - SethGunnells

text-right 适用于 Bootstrap 表单，而 pull-right 会将按钮放在表单外部，因此如果表单有背景，按钮将位于该背景之外。 - RDV

Answer 2

pull-right 正常工作

演示

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

- Suganth G

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>

希望这有所帮助。

- phyatt