Html 如何在同一个div中的两个按钮之间留出空间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11216645/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make space between two buttons in same div?
提问by daydreamer
What is the best way to horizontally space Bootstrap buttons?
水平间隔 Bootstrap 按钮的最佳方法是什么？
At the moment the buttons are touching:
目前按钮正在触摸：
<div class="btn-group">
<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
<i class="icon-in-button"></i>
Add to list
<span class="caret"/>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">here</a>
</li>
<li>
<a href="#">new</a>
</li>
</ul>
<button class="btn btn-info">
<i class="icon-in-button"></i>
more
</button>
</div>
jsfiddle showing the problem: http://jsfiddle.net/hhimanshu/sYLRq/4/
jsfiddle 显示问题：http: //jsfiddle.net/hhimanshu/sYLRq/4/
回答by Miroslav Popovic
Put them inside btn-toolbaror some other container, not btn-group. btn-groupjoins them together. More info on Bootstrap documentation.
将它们放入btn-toolbar或其他容器中，而不是btn-group. btn-group将它们连接在一起。有关 Bootstrap文档的更多信息。
Edit: The original question was for Bootstrap 2.x, but the same is still valid for Bootstrap 3and Bootstrap 4.
编辑：最初的问题是针对 Bootstrap 2.x，但同样对Bootstrap 3和Bootstrap 4仍然有效。
In Bootstrap 4you will need to add appropriate margin to your groups using utility classes, such as mx-2.
在Bootstrap 4 中，您需要使用实用程序类（例如 mx-2）为您的组添加适当的边距。
回答by Manmohan
Just put the buttons in a class ( class="btn-toolbar" ) as told by bro Miroslav Popovic.It works awesome.
正如米罗斯拉夫波波维奇兄弟所说，只需将按钮放在一个类中（ class="btn-toolbar" ）。它工作得很棒。
<div class="btn-toolbar">
<button type="button" id="btnSubmit" class="btn btn-primary btn-sm">Submit</button>
<button type="button" id="btnCancel" class="btn btn-primary btn-sm">Cancel</button>
</div>回答by Dragan B.
You can use spacing for Bootstrapand no need for any additional CSS. Just add the classes to your buttons. This is for version 4.
您可以为 Bootstrap使用间距，而无需任何额外的 CSS。只需将类添加到您的按钮。这是针对第 4 版的。
回答by mark dibe
you should use bootstrap v.4
你应该使用引导程序 v.4
<div class="form-group row">
<div class="col-md-6">
<input type="button" class="btn form-control" id="btn1">
</div>
<div class="col-md-6">
<input type="button" class="btn form-control" id="btn2">
</div>
</div>
回答by Gammer
The easiest way in most situations is margin.
大多数情况下最简单的方法是保证金。
Where you can do :
你可以在哪里做：
button{
margin: 13px 12px 12px 10px;
}
OR
或者
button{
margin: 13px;
}
回答by mrana
What Dragan B suggested is right way to go for Bootstrap 4. I have put one example below. e.g. mr-3 is margin-right:1rem!important
Dragan B 建议的是 Bootstrap 4 的正确方法。我在下面举了一个例子。例如，mr-3 是 margin-right:1rem!important
<div class="btn-toolbar pull-right">
<button type="button" class="btn mr-3">btn1</button>
<button type="button" class="btn mr-3">btn2</button>
<button type="button" class="btn">btn3</button>
</div>
p.s: in my case I wanted my buttons to be displayed to the right of the screen and hence pull-right.
ps：就我而言，我希望我的按钮显示在屏幕右侧，因此向右拉。
回答by Jonathan
I used the Bootstrap 4 buttons plugin (https://getbootstrap.com/docs/4.0/components/buttons/#button-plugin) and added the class roundedto the labels and the class mx-1to the middle button to achieve the desired look and feel of separate radio buttons. Using the class btn-toolbarmade the radio button circles appear for me which is not what I wanted. Hope this helps someone.
我使用了 Bootstrap 4 按钮插件（https://getbootstrap.com/docs/4.0/components/buttons/#button-plugin）并将四舍五入的类添加到标签并将类mx-1 添加到中间按钮以实现所需的单独单选按钮的外观和感觉。使用类btn-toolbar使单选按钮圆圈出现在我面前，这不是我想要的。希望这可以帮助某人。
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active rounded">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Active
</label>
<label class="btn btn-secondary rounded mx-1">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
</label>
<label class="btn btn-secondary rounded">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
</label>
</div>
回答by Swapnil
Another way to achieve this is to add a class .btn-space in your buttons
实现此目的的另一种方法是在按钮中添加一个类 .btn-space
<button type="button" class="btn btn-outline-danger btn-space"
</button>
<button type="button" class="btn btn-outline-primary btn-space"
</button>
and define this class as follows
并定义这个类如下
.btn-space {
margin-right: 15px;
}
回答by Vicente Niclos
if use Bootstrap, you can change with style like: If you want only in one page, then betwen head tags add .btn-group btn{margin-right:1rem;}
如果使用 Bootstrap，您可以更改样式，例如：如果您只想在一页中，则在 head 标签之间添加 .btn-group btn{margin-right:1rem;}
If is for all the web site add to css file
如果是为所有网站添加到 css 文件
回答by Khanh Hua
I actual ran into the same requirement. I simply used CSS override like this
我实际上遇到了同样的要求。我只是像这样使用了 CSS 覆盖
.navbar .btn-toolbar { margin-top: 0; margin-bottom: 0 }
