Як я можу зробити пробіл між двома кнопками в одному ділі?

Який найкращий спосіб горизонтально розмістити кнопки 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 2.x, але те саме все ще справедливо для Bootstrap 3 та Bootstrap 4 .

У Bootstrap 4 вам потрібно буде додати відповідну маржу до своїх груп за допомогою класів утиліт, таких як mx-2.

Просто покладіть кнопки в клас (class = "btn-панель інструментів"), як розповів брат Мірослав Попович. Це працює приголомшливо.

<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 і не потребувати додаткових CSS. Просто додайте класи до своїх кнопок. Це для версії 4.

ви повинні використовувати 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>

Що запропонував Драган Б - це правильний шлях до Bootstrap 4. Я наводив один приклад нижче. наприклад, mr-3 є правильним відривом: 1rem! важливо

<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-панелі інструментів, для мене з'явилися кола перемикачів, що не є тим, чого я хотів. Сподіваюся, що це комусь допоможе.

        <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-пробіл у ваших кнопках

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

якщо ви використовуєте Bootstrap, ви можете змінити такий стиль, як: Якщо ви хочете лише на одній сторінці, тоді між тегами заголовка додайте .btn-group btn {margin-right: 1rem;}

Якщо для всіх веб-сайт додайте у файл css

Рішення Драгана Б. правильне. У моєму випадку мені потрібні були розташовані кнопки вертикально під час укладання, тому я додав до них властивість 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>

Це дозволило мені вирівняти заголовки та вхідні перемикачі в добре розташованому порядку. Ця ж ідея може бути застосована і до кнопок і дозволяє вам зупинити торкання кнопок.

(Бічна примітка: я хотів, щоб це був коментар до вищезазначеного посилання, але моя репутація недостатньо висока)