如何使用bootstrap在按钮之间给出间距

Question

我想在按钮之间给出间距是否有办法使用引导程序给出间距,以便它们对于不同的屏幕分辨率是一致的.

我尝试过使用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;
}

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

Answer 2

您可以使用bootstrap Spacing实现.Bootstrap间距包括各种简写响应边距和填充.在下面的示例中,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 Sapcing.

Answer 3

根据 bootstrap 版本的不同而不同

如果您正在使用

引导4

先生-1

有关更多信息，请参阅官方 Bootsrap 4 边距和填充链接

引导程序5

我-1

有关更多信息，请参阅官方Bootsrap 5 边距和填充链接

Answer 4

1. 用class='col-xs-3'(例如)将按钮包裹在div中.
2. 添加class="btn-block"到您的按钮.

这将提供永久间距.

Answer 5

如果你想使用margin,请删除每个按钮上的类并使用:last-child CSS selector.

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

Answer 6

我不太擅长 html，但我 在按钮之间使用并且效果很好。

Answer 7

使用引导程序，您可以在按钮之间添加 <div class="col-sm-1 col-xs-1 col-md-1 col-lg-1"></div>。