5

パネルヘッダーにボタングループがあります。それらを右にフロートさせたいのですが、これを行うと、ボタンがヘッダーの下部にあるため、中央に配置する必要があります。どうすればいいですか？

HTMLは次のとおりです。

<div class="panel panel-default">
    <div class="panel-heading">
        Member of the following Units
        <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
            <button type="button" class="btn btn-danger" ><span class="glyphicon glyphicon-remove-circle"></span></button>
        </div>
    </div>
    <div class="panel-body">
        test
    </div>
    <div class="panel-footer">
        test
    </div>      
</div>

フィドルの例: http://jsfiddle.net/snowburnt/4ejuK/

奇妙なことに、クロム上の私の Linux 開発環境では、ボタン自体は適切に中央に配置されていますが、ボタン内のアイコンは本来あるべき位置よりも低くなっています。これにより、これらの問題の両方が解決されると感じています。

4

7 に答える 7

18

  1. float:right を指定する代わりに、クラスpull-rightを .btn-group div に追加する必要があります。

  2. 要素をフロートすると、ブロック レイアウトが失われます。高さがないため、コンテナの底を「押し下げる」ことはもうありません。overflow:hiddenを設定して、.panel-heading適切にサイズ変更できるようにすることで、これを修正できます。の高さに対応するために、 に上部パディングを追加し、.panel-headingに負の上部パディングを追加する必要があります。.btn-group.btn-group.

私はあなたのフィドルをフォークしました: http://jsfiddle.net/Dq5ge/

于 2013-10-30T19:19:09.670 に答える
3

フロートをクリアする必要があります。これには、clearfix ハックや、overflow: hidden の使用など、多くの方法があります。これは私があなたのフィドルでやったことです。http://jsfiddle.net/4ejuK/2/

.panel-heading {
    overflow: hidden;
}

フロートされた子がクリアされない場合、親要素が折りたたまれ、多くの予期しないレイアウトの問題が発生します。

于 2013-10-30T19:11:22.953 に答える
1

追加

.container{
 line-height:2.2;
}

上記のDavidが提案したものに加えて、テキストを真に垂直方向の中央に配置します. チェックフィドル

于 2013-10-30T19:16:19.457 に答える
1

サイズをあまり変更したり、上位の負のインデックスを使用したりせずに、2 つの最適なソリューションを 1 つにまとめました。

.panel-heading {
    overflow: hidden;
}

そして使用：

<div class="pull-right">

ここに例があります: Jsfiddle の例

于 2014-11-16T20:20:04.300 に答える
0

今日、この問題を自分で解決しました。私が見つけた一見有効な提案はすべて 、ボタンに合わせてピクセル単位で高さを設定することでしたが、それは私には合いませんでした。垂直方向の配置は、パネル テキスト自体の実際の高さとは無関係にしたかったのです。

@ithcyの回答を見て、 をジャッキアップするとfont-size、問題が発生します ( demo )。

グーグルで検索すればするほど、CSS が私が望んでいたものであると確信するようになりましたが、vertical-align私がすべきだと思っていることを決して実行しているようには見えませんでした。それから、ルイ・ラザリスの記事に出くわしましたvertical-align。

プロパティは、vertical-alignわかりやすい 3 つのステップに分けることができます。

  1. inlineまたはinline-block要素にのみ適用されます
  2. コンテンツではなく、要素自体の配置に影響します (表のセルに適用される場合を除く)。
  3. 表のセルに適用すると、配置はセル自体ではなく、セルの内容に影響します。

そしてもっと重要なことはそうではありません:

よくある誤解vertical-alignは、要素に適用すると、その要素内のすべての要素の垂直位置が変更されるというものです。

私の解決策はvertical-align、floatBootstrap が提供するpull-leftとpull-right. 私が（素朴に）行った方法では、少し余分なマークアップが必要ですが、必要な結果が得られました。

HTML

<div class="panel-heading table-style">
  <span class="panel-title">Member of...</span>
  <div class="button-wrap">
    <div class="btn-group btn-group-sm">
      <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
      <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-remove-circle"></span></button>
    </div>
  </div>
</div>

CSS

.panel-heading.table-style {
  display: table;
  width: 100%;
}
.panel-heading.table-style .panel-title {
  display: table-cell;
  vertical-align: middle;
  text-align: left;
}
.panel-heading.table-style .button-wrap {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
}

私はそれを使用している方法のデモを作成しましたが、これは改善できると確信しています。

btn-groupがこの方法でラップする傾向があることをよく知っていますが、これはひどく見えます。修理する知識も経験もありません。私の使用例では、グループではなく単一のボタンのみが必要なので、十分に機能しています。

于 2014-10-28T04:36:16.307 に答える
0

非常に遅いですが、このcssで解決するだけです:

.panel-heading h3,
.panel-heading .btn-group
{
  display:inline-block;
}
于 2015-10-28T16:04:06.363 に答える
0

そのためにトリックを使用できます;）

    ...
    Member of the following Units
    <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span></button>
        <button type="button" class="btn btn-danger" ><span class="glyphicon glyphicon-remove-circle"></span></button>
    </div>
    <div class="btn btn-primary btn-sm" style="opacity:0.001">I am hidden</div>
    ...

幸運を祈ります - SM Mousavi

于 2014-04-24T08:38:42.157 に答える