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

Question

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

97

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

daydreamer 26 июнь 2012, в 22:23

Источник

0

У меня возникла та же проблема, и я прекратил добавлять поле к одной из кнопок mr-1.
Ananth 23 авг. 2017, в 00:27

Теги:

twitter-bootstrap

html

css

5 ответов

48

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

Manmohan 24 окт. 2015, в 09:01

1

Самый простой способ в большинстве случаев - это маржа.

Где вы можете:

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

ИЛИ

button{
  margin: 13px;
}

Gammer 05 окт. 2015, в 20:32

0

Пользовательские поля не должны использоваться, когда вы можете поместить кнопки начальной загрузки в класс панели инструментов btn.
Millsionaire 06 нояб. 2018, в 18:50

0

Вы можете использовать интервал для Bootstrap и не нуждаться в каких-либо дополнительных CSS. Просто добавьте классы в свои кнопки. Это для версии 4.

Dragan B. 28 сен. 2017, в 14:34

0

Я действительно столкнулся с тем же требованием. Я просто использовал CSS переопределить, как этот

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

Khanh Hua 29 янв. 2014, в 04:28

3

Ему нужны поля
ymakux 29 сен. 2015, в 20:31

Ещё вопросы

У меня возникла та же проблема, и я прекратил добавлять поле к одной из кнопок mr-1.
Пользовательские поля не должны использоваться, когда вы можете поместить кнопки начальной загрузки в класс панели инструментов btn.

Miroslav Popovic · Accepted Answer · 2012-06-26T23-59-00.000Z

206

Лучший ответ

Поместите их внутри btn-toolbar или другого контейнера, а не btn-group. btn-group соединяет их вместе. Дополнительная информация о Bootstrap документации.

Изменить: исходный вопрос был для Bootstrap 2.x, но то же самое справедливо для Bootstrap 3 и Bootstrap 4.

Miroslav Popovic 26 июнь 2012, в 23:59

2

Я искал решение этой проблемы много лет назад, почему я не нашел тебя раньше, ты мой герой
Hakam Fostok 13 янв. 2017, в 14:29
1

какой прямой ответ! мой герой дня :)
Naga 17 дек. 2017, в 18:25
0

btn-toolbar может btn-toolbar некоторые кнопки на новую строку. Как этого избежать?
lukas84 05 март 2018, в 11:09
0

Планируется пробиться на отзывчивость. Если вы действительно хотите предотвратить его flex-wrap: nowrap , то установите flex-wrap: nowrap для btn-toolbar в Bootstrap 4 или попробуйте комбинацию overflow и white-space для более старых версий Bootstrap.
Miroslav Popovic 05 март 2018, в 13:17
0

Этот ответ все еще правильный? Я не вижу ни btn-toolbar класса btn-toolbar в BS4, и при просмотре раздела «Кнопки» в BS4 все примеры используют пользовательские классы.
Svend 28 авг. 2018, в 07:51
2

@Svend, посмотрите немного ниже в разделе «Группа кнопок» - getbootstrap.com/docs/4.1/components/button-group/…
Miroslav Popovic 28 авг. 2018, в 10:24
0

@MiroslavPopovic Спасибо, я думаю, что пропустил эту часть (но, возможно, ответ может быть связан с некоторым обновлением, так как вам нужно использовать btn-group). Я думаю, что дополнительная разметка не нужна, поэтому я просто создам свой собственный CSS.
Svend 28 авг. 2018, в 11:14

Показать ещё 5 комментариев