web-dev-qa-db-ja.com

Bootstrap 4 col div内で要素を右に揃える

私の質問は非常に簡単ですが、Bootstrap 4。

列8列と列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

2つのボタンをcol-4内で右揃えにします。

How in Bootstrap 4で列内の正しい要素を適切に整列するには？

csstwitter-bootstrapflexboxbootstrap-4twitter-bootstrap-4
10
BlackHoleGalaxy

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 in Bootstrap 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がcontainer-fluid内に配置されていることを確認してください。また、generalallycol-*はコンテンツを含むために使用され、他のコンポーネント/要素に適用されるべきではありません。したがって、たとえば、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

関連： divクラスの要素をbootstrap 4 で右揃えする

15
Zim

そのmd-4のbtn-groupclassはそのDIVをflexコンテナにするため、アライメント用の通常の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タグを消去しました）

4
Johannes

マークアップには、レイアウトが奇妙に見えるいくつかの問題があります。 @ZimSystemは.container-fluidに言及しましたが、div.col内に常に.rowを入れて、同じ種類のパディングがエッジにあるようにする必要があります。

ボタンの周りに<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>
3
Killerpixler