css - ボタンの位置が間違っている Bootstrap 3 パネル ヘッダー

Question

Bootstrap 3 を使用しており、パネル ヘッダーの右上隅にいくつかのボタンを追加したいと考えています。それらを追加しようとすると、タイトルのベースラインの下に表示されます。

コード : http://bootply.com/82631

タイトル、パネルの見出し、またはボタンに追加する必要がある不足している CSS は何ですか?

Answer 1

親要素をクリアするには、「clearfix」を適用する必要があります。次に、ヘッダー タイトルの h4 はヘッダー全体に広がっているため、clearfix を適用すると子要素が押し下げられ、ヘッダー div の高さが大きくなります。

ここに修正があります。それをコードに置き換えてください。

  <div class="panel-heading clearfix">
     <b>Panel header</b>
       <div class="btn-group pull-right">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
      </div>
   </div>

2015 年 12 月 22 日に編集 - 見出し div に .clearfix を追加

Answer 2

タイトル内にボタン群を配置し、最後にclearfixを追加しました。

<div class="panel-heading">
  <h4 class="panel-title">
    Panel header
    <div class="btn-group pull-right">
      <a href="#" class="btn btn-default btn-sm">## Lock</a>
      <a href="#" class="btn btn-default btn-sm">## Delete</a>
      <a href="#" class="btn btn-default btn-sm">## Move</a>
    </div>
  </h4>
  <div class="clearfix"></div>
</div>

Answer 3

btn-group内側はH4こんな感じで入れてみてください。

<div class="panel-heading">
    <h4>Panel header
    <span class="btn-group pull-right">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
    </span>
    </h4>
</div>

http://bootply.com/lpXoMPup2d

Answer 4

この場合.clearfix、コンテナの最後に浮動要素を追加する必要があります。

<div class="panel-heading">
    <h4>Panel header</h4>
    <div class="btn-group pull-right">
        <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
    </div>
    <span class="clearfix"></span>
</div>

http://www.bootply.com/NCXkOtIkD6

Answer 5

h4要素がブロックとして表示されます。それに境界線を追加すると、何が起こっているかがわかります。何かを右にフロートさせたい場合は、いくつかのオプションがあります。

1. ブロック (h4) 要素の前に浮動アイテムを配置します。
2. h4 要素もフロートします。
3. h4 要素をインラインで表示します。

いずれの場合も、clearfixクラスをコンテナー要素に追加して、ボタンの正しいパディングを取得する必要があります。

h4 要素にクラスを追加しpanel-titleたり、パディングを調整したりすることもできます。

Answer 6

またはこれ？行クラスを使用して

  <div class="row"> 
  <div class="  col-lg-2  col-md-2 col-sm-2 col-xs-2">
     <h4>Panel header</h4>
  </div>
 <div class="  col-lg-10  col-md-10 col-sm-10 col-xs-10 ">
    <div class="btn-group  pull-right">
       <a href="#" class="btn btn-default btn-sm">## Lock</a>
        <a href="#" class="btn btn-default btn-sm">## Delete</a>
        <a href="#" class="btn btn-default btn-sm">## Move</a>
    </div>
     </div>
  </div>
</div>