同じdiv内の2つのボタンの間にスペースを作成するにはどうすればよいですか？

ブートストラップボタンを水平に配置する最良の方法は何ですか？

現時点ではボタンが触れています：

<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に関するものでしたが、同じことがBootstrap 3とBootstrap 4にも引き続き有効です。

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

仲間のMiroslav Popovicの指示に従って、ボタンをクラス（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>

ブートストラップにはスペースを使用でき、追加のCSSは必要ありません。ボタンにクラスを追加するだけです。これはバージョン4用です。

ブートストラップv.4を使用する必要があります

<div class="form-group row">
    <div class="col-md-6">
        <input type="button" class="btn form-control" id="btn1">
    </div>
    <div class="col-md-6">
        <input type="button" class="btn form-control" id="btn2">
    </div>
</div>

Dragan Bが提案したのは、Bootstrap 4の正しい方法です。以下に1つの例を示します。たとえば、mr-3はmargin-right：1rem！importantです。

<div class="btn-toolbar pull-right">
   <button type="button" class="btn mr-3">btn1</button>
   <button type="button" class="btn mr-3">btn2</button>
   <button type="button" class="btn">btn3</button>
</div>

ps：私の場合、ボタンを画面の右側に表示して、右にプルするようにしました。

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

あなたができる場所：

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

または

button{
  margin: 13px;
}

Bootstrap 4ボタンプラグイン（https://getbootstrap.com/docs/4.0/components/buttons/#button-plugin）を使用し、ラベルに丸められたクラスとクラスmx-1を中央のボタンに追加して、個別のラジオボタンの望ましいルックアンドフィール。クラスbtn-toolbarを使用すると、ラジオボタンの円が表示されましたが、これは私が望んでいたものではありません。これが誰かを助けることを願っています。

        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-secondary active rounded">
                <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
            </label>
            <label class="btn btn-secondary rounded mx-1">
                <input type="radio" name="options" id="option2" autocomplete="off"> Radio
            </label>
            <label class="btn btn-secondary rounded">
                <input type="radio" name="options" id="option3" autocomplete="off"> Radio
            </label>
        </div>

これを実現する別の方法は、ボタンにクラス.btn-spaceを追加することです

  <button type="button" class="btn btn-outline-danger btn-space"
  </button>
  <button type="button" class="btn btn-outline-primary btn-space"
  </button>

このクラスを次のように定義します

.btn-space {
    margin-right: 15px;
}

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

.navbar .btn-toolbar { margin-top: 0; margin-bottom: 0 }

ブートストラップを使用する場合は、次のようなスタイルで変更できます。1つのページだけにしたい場合は、ヘッドタグの間に .btn-group btn {margin-right：1rem;}を追加します。

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

Dragan B.ソリューションは正しいです。私の場合、スタックするときにボタンを垂直方向に離す必要があったので、mb-2プロパティをボタンに追加しました。

<div class="btn-toolbar">
   <button type="button" class="btn btn-primary mr-2 mb-2">First</button>
   <button type="button" class="btn btn-primary mr-2 mb-2">Second</button>
   <button type="button" class="btn btn-primary mr-2 mb-2">Third</button>
</div>

私はマークダイブと同じようなことをしましたが、少し異なる方法で間隔を把握する必要がありました。

col-xブートストラップのクラスは、絶対的な命の恩人になることができます。私はこれに似たようなことをしてしまいました：

<div class="row col-12">
    <div class="col-3">Title</div>
</div>
<div class="row col-12">
    <div class="col-3">Bootstrap Switch</div>
<div>

これにより、タイトルと入力スイッチを適切な間隔で配置できました。同じアイデアをボタンに適用して、ボタンが触れないようにすることができます。

（補足：上記のリンクのコメントにしたかったのですが、私の評判は十分ではありません）