Bootstrap 4如何在col div中将元素右对齐

Question

我的问题很简单，但我找不到一个合适的方法（我的意思是不使用相对定位容器内的子元素的绝对定位）在Bootstrap 4中实现这一点。

我有一行包含一个col-8和一个col-4。我希望col-4中的内容右对齐，以便其内容位于右边界。

<h1 class="col-md-8">Applications portfolio</h1>

  <div class="btn-group col-md-4" role="group">
    <p class="float-right">
      <a class="btn btn-secondary btn-md" href="#">
        <i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
      <a class="btn btn-md btn-secondary" href="#">
        <i class="fa fa-flag" aria-hidden="true"></i> Report</a>
    </p>
  </div>

这里是一个CodePen:

https://codepen.io/anon/pen/QpzVgJ

我想让我的两个按钮在col-4中右对齐。

在Bootstrap 4中如何正确地将元素右对齐到列中？

- BlackHoleGalaxy

Answer 1

使用ml-auto将按钮向右推...

https://codepen.io/anon/pen/evbLQN

<div class="btn-group col-md-4" role="group">
    <p class="ml-auto">
      <a class="btn btn-secondary btn-md" href="#">
        <i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
      <a class="btn btn-md btn-secondary" href="#">
        <i class="fa fa-flag" aria-hidden="true"></i> Report</a>
    </p>
</div>

另一个选项是从 col-md-4 中移除 btn-group，float-right 将按预期工作。在Bootstrap 4中，pull-right 类已被 float-right 替换。

<section class="row">
  <h1 class="col-md-8">Applications portfolio</h1>

  <div class="col-md-4" role="group">
    <p class="float-right">
      <a class="btn btn-secondary btn-md" href="#">
        <i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
      <a class="btn btn-md btn-secondary" href="#">
        <i class="fa fa-flag" aria-hidden="true"></i> Report</a>
    </p>
  </div>
</section>

PS - 为了防止在您的Codepen中出现水平滚动条，请确保将.row放置在container-fluid中。 并且，通常情况下col-*用于包含内容，不应应用于其他组件/元素。 因此，例如，如果您想使用btn-group..

<div class="container-fluid">
    <section class="row">
        <div class="col-md-8">
            <h1>Applications portfolio</h1>
        </div>
        <div class="col-md-4">
            <div class="btn-group float-right mt-2" role="group">
                <a class="btn btn-secondary btn-md" href="#">
                    <i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
                <a class="btn btn-md btn-secondary" href="#">
                    <i class="fa fa-flag" aria-hidden="true"></i> Report</a>
            </div>
        </div>
    </section>
</div>

http://www.codeply.com/go/8OYDK5D8Db

---

相关：如何在具有Bootstrap 4的div类中右对齐元素

- Zim

Answer 2

btn-group类将md-4中的DIV变为一个flex容器，因此普通的text-right类无法对齐。相反，在style属性中添加justify-content: flex-end;：

<div class="btn-group col-md-4 text-right" role="group" style="justify-content: flex-end;">

https://codepen.io/anon/pen/RpEYEM

注意：我删除了该DIV内的p标签。

- Johannes

Answer 3

提供的标记存在一些问题，导致布局看起来很奇怪。@ZimSystem提到了.container-fluid，但也指出应该始终在.row内部添加一个div.col，以便获得相同类型的边缘填充。

你不需要在按钮周围加上<p>标签。要使对齐方式正确，只需在第一个按钮上添加.ml-auto即可，如下所示：

<div class="container-fluid">
<section class="row mb-2 mt-2">
  <h1 class="col-md-8">Applications portfolio</h1>

  <div class="btn-group col-md-4" role="group">
      <a class="btn btn-secondary btn-md ml-auto" href="#">
        <i class="fa fa-plus" aria-hidden="true"></i> Creation</a>
      <a class="btn btn-md btn-secondary" href="#">
        <i class="fa fa-flag" aria-hidden="true"></i> Report</a>
  </div>
</section>

<section class="row" style="background-color: grey; height: 50px; overflow:hidden;">
  <div class="col">
    <p>Just a simple reference block to see the 100% width</p>
  </div>
</section>
</div>

- Killerpixler