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

【问题标题】：Bootstrap side by side buttons no gap when buttons rearrange on small screens当按钮在小屏幕上重新排列时，Bootstrap 并排按钮没有间隙
【发布时间】：2018-11-17 19:20:21
【问题描述】：

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

Example picture 1

但在小型设备上看起来像这样

Example picture 2

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

这是使用的 HTML 的 sn-p

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

【问题讨论】：

标签： html css twitter-bootstrap button responsive-design

【解决方案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

【讨论】：

【解决方案2】：

将以下类添加到您的按钮。

.my-sm-1

或以下，到最后一个按钮

.mb-sm-1

就是这样！

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

【讨论】：

不客气。请投票并接受这一点，以便它可以帮助其他人。谢谢你

【解决方案3】：

您可以在每个.btn 中添加一些margin，并且您确实应该使用Bootstrap's flex utilities 来处理按钮的对齐问题。

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

【讨论】：

谢谢！完美运行！