172

Bootstrapボタンを水平方向に配置する最良の方法は何ですか?

ボタンが触れている瞬間：

<div class="btn-group">
    <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
        <i class="icon-in-button"></i>  
        Add to list
        <span class="caret"/>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">here</a>
        </li>
        <li>
            <a href="#">new</a>
        </li>
    </ul>
    <button class="btn btn-info">
        <i class="icon-in-button"></i>  
        more
    </button>
</div>

2 つのブートストラップ ボタン

問題を示す jsfiddle: http://jsfiddle.net/hhimanshu/sYLRq/4/

4

13 に答える 13

347

それらを中に入れるbtn-toolbarか、他の容器に入れてくださいbtn-group。btn-groupそれらを結合します。詳細については、Bootstrapのドキュメントを参照してください。

編集: 元の質問は Bootstrap 2.x に関するものでしたが、同じことがBootstrap 3およびBootstrap 4にも当てはまります。

Bootstrap 4では、mx-2 などのユーティリティ クラスを使用して、グループに適切なマージンを追加する必要があります。

于 2012-06-26T22:10:34.500 に答える
82

ミロスラフ・ポポビッチ兄弟が語ったように、ボタンをクラス（ class="btn-toolbar" ）に配置するだけです。

<div class="btn-toolbar">
  <button type="button" id="btnSubmit" class="btn btn-primary btn-sm">Submit</button>
  <button type="button" id="btnCancel" class="btn btn-primary btn-sm">Cancel</button>
</div>

于 2015-10-24T07:12:12.253 に答える
6

ほとんどの状況で最も簡単な方法はマージンです。

あなたができる場所：

button{
  margin: 13px 12px 12px 10px;
}

また

button{
  margin: 13px;
}
于 2015-10-05T19:03:47.770 に答える
0

私は実際に同じ要件に遭遇しました。私は単にこのようなCSSオーバーライドを使用しました

.navbar .btn-toolbar { margin-top: 0; margin-bottom: 0 }
于 2014-01-29T02:57:19.523 に答える
0

Bootstrap を使用する場合、次のようなスタイルで変更できます 。

すべての Web サイトの場合は、css ファイルに追加します

于 2018-02-11T15:56:20.473 に答える