Как я могу сделать пространство между двумя кнопками в одном div?

Каков наилучший способ горизонтального размещения кнопок 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, но тот же по-прежнему действует для Bootstrap 3 и Bootstrap 4 .

В Bootstrap 4 вам нужно будет добавить соответствующие поля в ваши группы, используя служебные классы, такие как mx-2.

Просто поместите кнопки в класс (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>

Вы можете использовать интервал для 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-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 }

если вы используете Bootstrap, вы можете изменить стиль следующим образом: если вы хотите использовать только одну страницу, то между тегами head добавьте .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>

Это позволило мне выровнять заголовки и переключатели ввода в удобном порядке. Та же идея может быть применена к кнопкам и позволит вам не касаться кнопок.

(Примечание: я хотел, чтобы это был комментарий к вышеуказанной ссылке, но моя репутация недостаточно высока)