Html 如何使用引导程序在按钮之间提供间距

How to give spacing between buttons using bootstrap

提问by vaibhav jain

I want to give spacing between buttons is there a way to give spacing using bootstrap so that they will be consistent for different screen resolutions.

我想给按钮之间的间距有没有办法使用引导程序给间距，以便它们在不同的屏幕分辨率下保持一致。

I tried using margin-leftBut is it the correct way to do this.??

我试过使用margin-left但这是正确的方法吗？？

Here is the demo

这是演示

HTML:

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:

CSS：

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

回答by Asif Raza

You can achieved by use bootstrap Spacing. Bootstrap Spacing includes a wide range of shorthand responsive margin and padding. In below example mr-1set the marginor paddingto $spacer* .25.

您可以通过使用 bootstrap Spacing来实现。Bootstrap Spacing 包括各种速记响应边距和填充。在下面的示例中，mr-1将marginor设置padding为$spacer* .25。

Example:

例子：

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

You can read more at Bootstrap Spacing.

您可以在Bootstrap Spacing阅读更多内容。

回答by Sergey Chepurnov

HTML:

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:

CSS：

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

回答by Alex Khlebaev

1. Wrap your buttons in a div with class='col-xs-3'(for example).
2. Add class="btn-block"to your buttons.

1. 将您的按钮包裹在一个 div 中class='col-xs-3'（例如）。
2. 添加class="btn-block"到您的按钮。

This will provide permanent spacing.

这将提供永久间距。

回答by Thibaud Granier

If you want use margin, remove the class on every button and use :last-childCSS selector.

如果您想使用边距，请删除每个按钮上的类并使用:last-childCSS 选择器。

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 :

css :

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

回答by ganders

Depends on how much space you want. I'm not sure I agree with the logic of adding a "col-XX-1" in between each one, because you are then defining an entire "column" in between each one.

取决于你想要多少空间。我不确定我是否同意在每一个之间添加一个“col-XX-1”的逻辑，因为你在每一个之间定义了一个完整的“列”。

If you just want "a little spacing" in between each button, I like to add padding to the encompassing row. That way, I can still use all 12 columns, while including a "space" in between each button.

如果您只想在每个按钮之间留出“一点间距”，我喜欢向包围行添加填充。这样，我仍然可以使用所有 12 列，同时在每个按钮之间包含一个“空格”。

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

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

回答by Shashikala

Use btn-primary-spacingclass for all buttons remove margin-leftclass

btn-primary-spacing对所有按钮使用类删除margin-left类

Example :

例子 ：

<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 will be like :

CSS 将是这样的：

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

回答by Dragan B.

You can use built-in spacing from Bootstrapso no need for additional CSS there. This is for Bootstrap 4.

您可以使用Bootstrap 的内置间距，因此不需要额外的 CSS。这是针对 Bootstrap 4 的。

回答by Theo Knoops

Adding margins to a button makes it wider so that les buttons fit in the grid system. If only a visual effect is important, then give the button a white border with [style="margin:0px; border:solid white;"] This leaves the button width unaffected.

为按钮添加边距使其更宽，以便 les 按钮适合网格系统。如果只有视觉效果很重要，那么给按钮一个白色边框 [style="margin:0px; border:solid white;"] 这样按钮宽度不受影响。

回答by Mike K

The original code is mostly there, but you need btn-groups around each button. In Bootstrap 3 you can use a btn-toolbar and a btn-group to get the job done; I haven't done BS4 but it has similar constructs.

原始代码大部分都在那里，但是btn-group每个按钮周围都需要s。在 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>

回答by Joaquin Oscar Ibar

using bootstrap you can add <div class="col-sm-1 col-xs-1 col-md-1 col-lg-1"></div>between buttons.

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