Bootstrap 3 を使用しており、パネル ヘッダーの右上隅にいくつかのボタンを追加したいと考えています。それらを追加しようとすると、タイトルのベースラインの下に表示されます。
コード : http://bootply.com/82631
タイトル、パネルの見出し、またはボタンに追加する必要がある不足している CSS は何ですか?
Bootstrap 3 を使用しており、パネル ヘッダーの右上隅にいくつかのボタンを追加したいと考えています。それらを追加しようとすると、タイトルのベースラインの下に表示されます。
コード : http://bootply.com/82631
タイトル、パネルの見出し、またはボタンに追加する必要がある不足している CSS は何ですか?
親要素をクリアするには、「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 を追加
タイトル内にボタン群を配置し、最後に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>
この場合.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>
h4
要素がブロックとして表示されます。それに境界線を追加すると、何が起こっているかがわかります。何かを右にフロートさせたい場合は、いくつかのオプションがあります。
いずれの場合も、clearfix
クラスをコンテナー要素に追加して、ボタンの正しいパディングを取得する必要があります。
h4 要素にクラスを追加しpanel-title
たり、パディングを調整したりすることもできます。
またはこれ?行クラスを使用して
<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>