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

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类改为float-right在引导4.

<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其置于a中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类中右对齐元素

Answer 2

btn-groupmd-4 中的类使该 DIV 成为弹性容器，因此用于对齐的常规类text-right将不起作用。相反，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

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