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>

这是一个代码笔：

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

我希望我的两个按钮在 col-4 中右对齐。

如何在 Bootstrap 4 中正确对齐列中的右元素？

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 将按预期工作。 pull-right class 在 Bootstrap 4.

中被 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-* 用于包含内容，不应应用于其他 components/elements。因此，例如，如果您想使用 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

相关：

Answer 2

那个 md-4 中的 btn-groupclass 使 DIV 成为一个弹性容器，所以一个常规的 text-right class 对齐不会'不工作。相反，在样式属性中添加 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 标签）

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>

Bootstrap 4 个元素在 col 内对齐 div

Bootstrap 4 align elements right inside a col div

css

flexbox

twitter-bootstrap

twitter-bootstrap-4

bootstrap-4