Как задать расстояние между кнопками с помощью бутстрапа

Ответ 1

HTML:

<input id="id_ok" class="btn btn-space" value="OK" type="button">
<input id="id_cancel" class="btn btn-space" value="Cancel" type="button">

CSS

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

Ответ 2

Вы можете достичь путем использования начальной загрузки Spacing. Bootstrap Spacing включает в себя широкий диапазон сокращенных чувствительных полей и отступов. В приведенном ниже примере mr-1 устанавливает margin или padding в $spacer *.25.

Пример:

<button class="btn btn-outline-primary mr-1" href="#">Sign up</button>
<button class="btn btn-outline-primary" href="#">Login</button>

Вы можете узнать больше на Bootstrap Spacing.

Ответ 3

• Оберните свои кнопки в div с помощью class='col-xs-3' (например).
• Добавьте class="btn-block" к вашим кнопкам.

Это обеспечит постоянный интервал.

Ответ 4

Если вы хотите использовать маржу, удалите класс на каждой кнопке и используйте селектор CSS : last-child.

Html:

<div class="btn-toolbar text-center well">
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2">
      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> ADD PACKET
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2">
      <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> EDIT CUSTOMER
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2">
      <span class="glyphicon glyphicon-time" aria-hidden="true"></span> HISTORY
    </button>
    <button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2">
      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> DELETE CUSTOMER
    </button>
</div>

Css:

.btn-toolbar .btn{
    margin-right: 5px;
}
.btn-toolbar .btn:last-child{
    margin-right: 0;
}

Ответ 5

Зависит от того, сколько места вы хотите. Я не уверен, что согласен с логикой добавления "col-XX-1" между каждой из них, потому что вы затем определяете весь "столбец" между ними.

Если вы просто хотите "немного интервала" между каждой кнопкой, мне нравится добавлять дополнения к охватывающей строке. Таким образом, я все еще могу использовать все 12 столбцов, включая "пробел" между каждой кнопкой.

Bootply: http://www.bootply.com/ugeXrxpPvD

Ответ 6

Использовать класс btn-primary-spacing для всех кнопок remove margin-left class

Пример:

<button type="button" class="btn btn-primary btn-color btn-bg-color btn-sm col-xs-2 btn-primary-spacing">
  <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> ADD PACKET
</button>

CSS будет выглядеть следующим образом:

.btn-primary-spacing 
{
margin-right: 5px;
margin-bottom: 5px !important;
}

Ответ 7

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

Ответ 8

Добавление полей к кнопке делает его более широким, так что кнопки лепестков вписываются в сетку. Если важен только визуальный эффект, тогда дайте кнопке белую рамку с [style = "margin: 0px; border: solid white;" ] Это оставляет неизменной ширину кнопки.

Ответ 9

с помощью бутстрапа вы можете добавить <div class="col-sm-1 col-xs-1 col-md-1 col-lg-1"></div> между кнопками.

Ответ 10

Оригинальный код в основном там, но вам нужно btn-group вокруг каждой кнопки. В Bootstrap 3 вы можете использовать панель инструментов btn и группу btn, чтобы выполнить работу; Я не сделал BS4, но он имеет аналогичные конструкции.

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group" role="group">
    <button class="btn btn-default">Button 1</button>
  </div>
  <div class="btn-group" role="group">
    <button class="btn btn-default">Button 2</button>
  </div>
</div>