Bagaimana saya bisa membuat ruang antara dua tombol di div yang sama?

Apa cara terbaik untuk secara spasial tombol Bootstrap horizontal?

Saat ini tombolnya menyentuh:

<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 menunjukkan masalah: http://jsfiddle.net/hhimanshu/sYLRq/4/

Taruh di dalam btn-toolbaratau wadah lain, bukan btn-group. btn-groupbergabung dengan mereka bersama. Info lebih lanjut tentang dokumentasi Bootstrap .

Sunting: Pertanyaan aslinya adalah untuk Bootstrap 2.x, tetapi hal yang sama masih berlaku untuk Bootstrap 3 dan Bootstrap 4 .

Di Bootstrap 4 Anda perlu menambahkan margin yang sesuai ke grup Anda menggunakan kelas utilitas, seperti mx-2.

Masukkan saja tombol-tombol di kelas (class = "btn-toolbar") seperti yang diceritakan oleh bro Miroslav Popovic. Ini berfungsi luar biasa.

<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>

Anda dapat menggunakan spasi untuk Bootstrap dan tidak perlu untuk CSS tambahan. Cukup tambahkan kelas ke tombol Anda. Ini untuk versi 4.

Anda harus menggunakan bootstrap 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>

Apa yang disarankan Dragan B adalah cara yang tepat untuk menggunakan Bootstrap 4. Saya telah memberikan satu contoh di bawah ini. mis. mr-3 margin-right: 1rem! penting

<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: dalam kasus saya, saya ingin tombol saya ditampilkan di sebelah kanan layar dan karenanya menarik-kanan.

Cara termudah dalam kebanyakan situasi adalah margin.

Di mana Anda dapat melakukan:

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

ATAU

button{
  margin: 13px;
}

Saya menggunakan plugin Bootstrap 4 tombol ( https://getbootstrap.com/docs/4.0/components/buttons/#button-plugin ) dan menambahkan kelas yang dibulatkan ke label dan kelas mx-1 ke tombol tengah untuk mencapai tampilan dan nuansa yang diinginkan dari tombol radio yang terpisah. Menggunakan kelas btn-toolbar membuat lingkaran tombol radio muncul untuk saya yang bukan yang saya inginkan. Semoga ini bisa membantu seseorang.

        <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>

Cara lain untuk mencapai ini adalah menambahkan kelas .btn-ruang di tombol Anda

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

dan mendefinisikan kelas ini sebagai berikut

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

Saya sebenarnya berlari ke persyaratan yang sama. Saya hanya menggunakan CSS override seperti ini

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

jika menggunakan Bootstrap, Anda dapat mengubah dengan gaya seperti: Jika Anda hanya ingin dalam satu halaman, maka antara tag kepala tambahkan .btn-grup btn {margin-right: 1rem;}

Jika untuk semua situs web tambahkan ke file css

Solusi Dragan B. benar. Dalam kasus saya, saya perlu tombol untuk ditempatkan secara vertikal ketika menumpuk jadi saya menambahkan properti mb-2 ke mereka.

<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>

Saya akhirnya melakukan sesuatu yang mirip dengan tanda apa yang dibe dilakukan, tetapi saya perlu mencari tahu dengan cara yang sedikit berbeda.

col-xKelas - kelas dalam bootstrap bisa menjadi penyelamat absolut. Saya akhirnya melakukan sesuatu yang mirip dengan ini:

<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>

Ini memungkinkan saya untuk menyelaraskan judul dan sakelar masukan dengan jarak yang baik. Ide yang sama dapat diterapkan pada tombol dan memungkinkan Anda untuk menghentikan tombol dari sentuhan.

(Catatan: Saya ingin ini menjadi komentar pada tautan di atas, tetapi reputasi saya tidak cukup tinggi)