Css 引导4在col div内对齐元素

我的问题很简单，但在Bootstrap4中，我没有找到合适的方法（我的意思是不要在相对位置容器中使用子元素的绝对位置）来实现这一点

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

我有一排8列和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>

应用程序组合

这是一个密码笔：

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

---

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

使用

ml auto

将按钮按到右侧

---

PS-为防止在代码笔中看到水平滚动条，请确保将

.row

放置在

容器流体中。此外，通常
col-*
用于包含内容，不应应用于其他组件/元素。例如，如果您想使用
btn组

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


应用程序组合



相关：
md-4中的
btn组
类使该DIV成为flex容器，因此用于对齐的常规
文本右侧
类不起作用。相反，添加
justify content:flex end在其样式属性中：

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




（注意：我删除了该DIV中的
p
标记）
提供的标记存在一些问题，使布局看起来很奇怪@Zim对
.container fluid
进行了修改，但也要求在
.row
中始终有一个
div.col
，以便在边缘上获得相同的填充

按钮周围不需要
。要获得对齐，只需向第一个按钮添加
.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>


应用程序组合
只需一个简单的参考块就可以看到100%的宽度


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