[解決済み] 同じdivにある2つのボタンの間にスペースを空けるにはどうしたらいいですか？

質問

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>

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

解決方法は？

中に入れる btn-toolbar または他のコンテナではなく btn-group . btn-group はそれらを結合する。Bootstrapの詳細情報 ドキュメンテーション .

編集：元の質問はBootstrap 2.xのものでしたが、同じことが、以下の場合にも有効です。 ブートストラップ3 と ブートストラップ4 .

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