Question

所以我能够并排放置两个按钮，但是当屏幕太小时，按钮会从上到下重新排列（就像应该的那样），但是问题是它们之间没有缝隙这是我的按钮在“普通”尺寸的屏幕上的样子

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

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

以下是所用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>

朋克：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

您可以在每个margin上放一些.btn，您确实应该使用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>

在小屏幕上重新排列按钮时，引导程序并排按钮没有间隙

3 个答案: