59

ヘッダー (H1/H2/H3) の向こう側にボタン グループを配置することができました。しかし、ボタンを真ん中に縦に浮かせる方法がわかりません。上位に留まるだけです。使ってみmargin-topましたが、固定値なので動的に真ん中に配置されません。

スクリーンショットは次のとおりです。

ここに画像の説明を入力

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

<div class="container">
  <section>
    <div class="page-header">
      <h1 class="pull-left">
        The header
      </h1>
      <div class="pull-right">
        <div class="btn-group">
          <button class="btn btn-primary">
            Actions
          </button>
          <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu pull-right">
            <li>
              <a href="#">Action</a>
            </li>
            <li>
              <a href="#">Another Action</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
    Contents
  </section>
</div>

前もって感謝します。

jsFiddle: http://jsfiddle.net/aurorius/PKrUC/

4

3 に答える 3

170

これは、Google から誰かがここに来る場合に備えて、追加の CSS なしで Bootstrap 3.2、3.3 のヘッダーと並んでいるボタンを取得する方法です。

オプション1

http://jsfiddle.net/ypaL5nko/

<div class='page-header'>
  <div class='btn-toolbar pull-right'>
    <div class='btn-group'>
      <button type='button' class='btn btn-primary'>Button Text</button>
    </div>
  </div>
  <h2>Header Text</h2>
</div>

単一のボタンのみを使用している場合、ボタン グループはオプションです。

オプション 2

http://jsfiddle.net/sLdnae3q/

<h1>
  <span>Header Text</span>
  <button class='btn btn-primary pull-right'>Button Text</button>
</h1>
<hr/>
于 2014-11-05T20:17:38.593 に答える
9

このCSSコードを試してください

.btn-group.my-class{
  bottom: 15px;
  position: relative;
  top: 15px;
}

H1/H2/H3 の動的ヘッダー。H4 の場合もある

デモ: http://jsfiddle.net/PKrUC/2/

于 2012-10-30T09:43:30.200 に答える
1

float を使用すると、tedisplay:inline-block;プロパティが無効になり、一番上にフロートされます。

コンテナーにブートストラップ クラスtext-rightを追加するだけで、垂直方向の配置をそのまま維持できます。

于 2014-05-14T07:19:12.390 に答える