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 中正确对齐 col 中的正确元素？

原文由 BlackHoleGalaxy 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

另一种选择是从 --- 中删除 btn-group col-md-4 ，然后 float-right 将按预期工作。 pull-right 类在 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-* 用于包含内容，不应应用于其他组件/元素。因此，例如，如果您想使用 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

---

相关： 使用引导程序 4 右对齐 div 类中的元素

原文由 Zim 发布，翻译遵循 CC BY-SA 3.0 许可协议