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