Как я могу сделать пространство между двумя кнопками в одном div?
каков наилучший способ горизонтально разместить кнопки начальной загрузки?
в данный момент кнопки касаются:
<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/
9 ответов
положите их внутрь btn-toolbar
или какой-то другой контейнер, не btn-group
. btn-group
соединяет их вместе. Дополнительная информация о Bootstrap документация.
Edit: исходный вопрос был для Bootstrap 2.x, но то же самое по-прежнему справедливо для Bootstrap 3 и Bootstrap 4.
просто поместите кнопки в класс (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>
самый простой способ в большинстве случаев является маржа.
где вы можете сделать:
button{
margin: 13px 12px 12px 10px;
}
или
button{
margin: 13px;
}
можно использовать интервал для Bootstrap и нет необходимости в каких-либо дополнительных CSS. Просто добавьте классы к своим кнопкам. Это для версии 4.
я использовал плагин Bootstrap 4 buttons (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>
вы должны использовать 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>
Я собственно столкнулся с тем же требованием. Я просто использовал CSS override, как это
.navbar .btn-toolbar { margin-top: 0; margin-bottom: 0 }
Если использовать Bootstrap, вы можете изменить стиль: Если вы хотите только на одной странице, то между тегами head добавьте .btn-group btn{margin-right:1rem;}
Если для всего веб-сайта добавить в файл css
другой способ достичь этого-добавить класс .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;
}