ブートストラップ4列内の要素を整列する

Question

私の質問はかなりシンプルですが、ブートストラップ4でこれを実現するには適切な方法（相対位置コンテナ内のサブ要素の絶対位置指定を使わないでください）が見つかりません。

私はcol-8とcol-4の行を持っています。 col-4のコンテンツは右揃えである必要があります。

https://codepen.io/anon/pen/QpzVgJ

が、私は私の二つのボタンが右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です。

1つの列内で右の要素を正しく配置するには、どのようにブートストラップ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クラスは、PS

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

---

ブートストラップ4に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

---

関連：そのMD-4でRight align element in div class with bootstrap 4

Answer 2

btn-groupクラスは、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>