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

Я хочу указать интервал между кнопками, есть ли способ задать интервал с помощью начальной загрузки, чтобы они были согласованы для разных разрешений экрана.

Я пробовал использовать margin-leftНо это правильный способ сделать это. ??

Вот демо

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 margin-left">
      <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 margin-left">
      <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 margin-left">
      <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 margin-left">
      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> DELETE CUSTOMER
    </button>
</div>

CSS:

.margin-left{
    margin-left: 80px !important;
}

Вы можете добиться этого, используя интервал начальной загрузки . 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 .

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

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

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

Если вы хотите использовать маржу, удалите класс на каждой кнопке и используйте селектор 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;
}

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

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

Загрузочный: http://www.bootply.com/ugeXrxpPvD

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

Пример :

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

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

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

Исходный код в основном там, но вам нужно, чтобы btn-groupвокруг каждой кнопки. В Bootstrap 3 вы можете использовать btn-toolbar и btn-group для выполнения работы; Я не делал 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>

Я довольно плохо разбираюсь в html, но я использовал  между кнопками, и он работал хорошо.

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