当按钮在小屏幕上重新排列时，Bootstrap并排按钮没有间隙

Question

所以我可以把两个按钮并排放置，但当屏幕太小时，按钮会从上到下重新排列(就像它们应该的那样(，但问题是它们之间没有间隙，例如，这就是我的按钮在"正常"大小的屏幕上的样子

示例图片1

但在一个小型设备上，它看起来像这个

示例图片2

正如你所看到的，在一个较小的设备上，当按钮从上到下重新排列时，现在按钮之间没有间隙，有什么方法可以解决这个问题吗？

以下是使用的HTML片段

<div style="text-align: center;">
<a href="#" class="btn btn-info" role="button">btn example 1</a>
<a href="#" class="btn btn-info" role="button">btn example 2</a>
</div>

Answer 1

您可以在css中只添加margin，然后在按钮之间添加边距：

<div style="text-align: center;">
<a href="#" class="btn btn-info" role="button">btn example 1</a>
<a href="#" class="btn btn-info" style="margin:3px;" role="button">btn example 2</a>
</div>

plunker：http://plnkr.co/edit/8B4Wifa8aTqVaFaZcasg?p=preview

Answer 2

将以下类添加到按钮中。

.my-sm-1

或者下面，到最后一个按钮

.mb-sm-1

就这样！

更多信息https://getbootstrap.com/docs/4.1/utilities/spacing/

Answer 3

您可以在每个.btn中放入一些margin，并且您确实应该使用Bootstrap的flex实用程序来处理按钮的对齐。

.btn {
margin: 0.25em;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex justify-content-around flex-wrap">
<a href="#" class="btn btn-info" role="button">btn example 1</a>
<a href="#" class="btn btn-info" role="button">btn example 2</a>
<a href="#" class="btn btn-info" role="button">btn example 3</a>
</div>
<hr/>
<div class="d-flex justify-content-center flex-wrap">
<a href="#" class="btn btn-info" role="button">btn example 1</a>
<a href="#" class="btn btn-info" role="button">btn example 2</a>
<a href="#" class="btn btn-info" role="button">btn example 3</a>
</div>
<hr/>
<div class="d-flex justify-content-between flex-wrap">
<a href="#" class="btn btn-info" role="button">btn example 1</a>
<a href="#" class="btn btn-info" role="button">btn example 2</a>
<a href="#" class="btn btn-info" role="button">btn example 3</a>
</div>