Як вказати інтервал між кнопками за допомогою завантажувального ремінця

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

Я спробував використати, 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 стовпців, включаючи пробіл між кожною кнопкою.

Bootply: 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.

Додавання полів до кнопки робить її ширшою, щоб кнопки зменшились до системи сітки. Якщо важливий лише візуальний ефект, надайте кнопці білу рамку із [style = "margin: 0px; border: solid white;"] Це залишає незмінною ширину кнопки.

Оригінальний код здебільшого є, але вам потрібні btn-groups навколо кожної кнопки. У 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>

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

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