Aynı div'de iki düğme arasında nasıl boşluk bırakabilirim?

Bootstrap düğmelerini yatay olarak yerleştirmenin en iyi yolu nedir?

Düğmeler şu anda dokunuyor:

<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 sorunu gösteriyor: http://jsfiddle.net/hhimanshu/sYLRq/4/

Onları içine btn-toolbarveya başka bir kaba koyun , değil btn-group. btn-grouponları birleştirir. Bootstrap belgeleri hakkında daha fazla bilgi .

Düzenleme: Orijinal soru Bootstrap 2.x içindi, ama aynı Bootstrap 3 ve Bootstrap 4 için de geçerlidir .

In Bootstrap 4 Böyle mx-2 olarak yarar sınıfları, kullanarak gruplarına uygun marjı eklemek gerekir.

Düğmeleri kardeş Miroslav Popovic'in söylediği gibi bir sınıfa (class = "btn-toolbar") koyun.

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

Bootstrap için boşluk kullanabilirsiniz ve herhangi bir ek CSS'ye gerek yoktur. Sınıfları düğmelerinize ekleyin. Bu sürüm 4 içindir.

bootstrap v.4 kullanmalısınız

<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'nin önerdiği şey Bootstrap 4 için doğru yol. Aşağıda bir örnek verdim. örneğin, mr-3 kenar boşluğu: 1rem! önemli

<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: benim durumumda düğmelerimin ekranın sağında görüntülenmesini ve dolayısıyla sağa çekilmesini istedim.

Çoğu durumda en kolay yol marjdır.

Nerede yapabilirsiniz:

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

VEYA

button{
  margin: 13px;
}

Bootstrap 4 düğme eklentisini ( https://getbootstrap.com/docs/4.0/components/buttons/#button-plugin ) kullandım ve etiketlere yuvarlanan sınıfı ve mx-1 sınıfını orta düğmeye ekledim ayrı radyo düğmelerinin istenen görünümü ve hissi. Btn-toolbar sınıfını kullanarak radyo düğmesi daireler benim için görünüyordu ki bu istediğim şey değildi. Umarım bu birine yardımcı olur.

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

Bunu başarmanın başka bir yolu da düğmelerinize bir sınıf .btn-space eklemektir.

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

ve bu sınıfı aşağıdaki gibi tanımlayın

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

Ben de aynı şartı yerine getirdim. Ben sadece böyle CSS geçersiz kılma kullandım

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

Bootstrap kullanıyorsanız, aşağıdaki gibi bir stille değiştirebilirsiniz: Yalnızca bir sayfada istiyorsanız, baş etiketleri arasında .btn-group btn {margin-right: 1rem;} ekleyin

Tüm web siteleri için ise css dosyasına ekleyin

Dragan B. çözeltisi doğrudur. Benim durumumda istifleme sırasında düğmeler dikey aralıklı olması gerekiyordu, bu yüzden onlara mb-2 özelliğini ekledim.

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

Mark dibe'ın yaptıklarına benzer bir şey yaptım, ancak aralamayı biraz farklı bir şekilde bulmam gerekiyordu.

col-xİlk yükleme yordamı sınıflar mutlak bir cankurtaran olabilir. Buna benzer bir şey yaptım:

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

Bu, başlıkları ve giriş anahtarlarını güzel bir şekilde sıralamamı sağladı. Aynı fikir düğmelere de uygulanabilir ve düğmelerin dokunmasını durdurmanızı sağlar.

(Yan not: Bunun yukarıdaki bağlantıya bir yorum olmasını istedim, ancak itibarım yeterince yüksek değil)