ブートストラップ3パネルヘッダーのボタンの位置が間違っている

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

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

タイトル、パネルの見出し、またはボタンのいずれかに追加する必要のあるCSSは何ですか？

まずclearfix、<div>with panel-headingクラスにクラスを追加します。その後、両方を追加panel-titleし、pull-leftするH4タグ。次に、padding-top必要に応じてを追加します。

完全なコードは次のとおりです。

<div class="panel panel-default">
    <div class="panel-heading clearfix">
      <h4 class="panel-title pull-left" style="padding-top: 7.5px;">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>
    </div>
    ...
</div>

http://bootply.com/98827

私はここでゲームに少し遅れましたが、簡単な答えは、ボタンdivの後にH4を移動することです。これはフローティング時の一般的な問題です。残りのコンテンツの前にフロートを定義しておくと、余分な改行の問題が発生します。

<div class="panel-heading">
    <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>Panel header</h4>
</div>

ここでの問題は、フロートが他のアイテムの後に定義されている場合、フロートの上端がその直前の要素の最後の行位置から始まることです。したがって、前のアイテムが3行目に折り返される場合、フロートも3行目から始まります。

フロートをリストのTOPに移動すると、それを押し下げる前の要素がなく、フロートの後は何でも最上行にレンダリングされるため、問題が解消されます（すべてのアイテムの行にスペースがあると想定）

正しい順序と間違った順序の例とその影響：http : //www.bootply.com/HkDlNIKv9g

親要素をクリアするには、「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を追加

タイトル内にボタングループを配置し、下部にクリアフィックスを追加しました。

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

こんな感じで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

あなたは部分的に正しいです。で<b>title</b>、それは正常に見えるが、私は使用したいと思います<h4>。

私は入れている<h4 style="display: inline;">、それが仕事に縫い目。

今、私はいくつかの垂直整列を追加する必要があるだけです。

この場合.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

.panel-headingヘルプで追加のクラスを使用していることがわかりました。

<div class="panel-heading contains-buttons">
   <h3 class="panel-title">Panel Title</h3>
   <a class="btn btn-sm btn-success pull-right" href="something.html"><i class="fa fa-plus"></i> Create</a>
</div>

そして、この少ないコードを使用します：

.panel-heading.contains-buttons {
    .clearfix;
    .panel-title {
        .pull-left;
        padding-top:5px;
    }
    .btn {
        .pull-right;
    }
}

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

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

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

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

それともこれ？行クラスを使用する

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