引导4对齐元素一个山坳DIV中

Question

我的问题很简单，但我没有找到一个合适的方式（我的意思是不是用相对位置容器内的子元素的绝对positionning）在引导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

我希望我的两个按钮右侧的山坳-4中对齐。

如何在引导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类是在引导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换成float-right - 为了防止水平滚动条在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

---

相关：Right align element in div class with bootstrap 4

Answer 2

的btn-group类在MD-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

（注：我擦除的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>