Twitter Bootstrap中的btn-group-vertical如何在按钮之间添加边距

Question

有没有一种简单的方法在 Twitter Bootstrap 的 btn-group-vertical 按钮之间添加一些边距，并使它们都具有圆角？

我的第一次尝试是使用 CSS 在它们之间添加一些边距，但后来我发现，除了第一个和最后一个之外，其他按钮都没有圆角，所以我希望有一种“体面”的方法来实现这个目标...

- Danny

Answer 1

我认为这是最简单的方法。

CSS

.btn-group-vertical > button{
    margin-bottom:10px;
    border-radius:10px !important;
}

演示

- Adrian Enriquez

---

@DylanDelobel 它曾经可以工作。现在已经更新并再次工作。 - Adrian Enriquez

Answer 2

使用Bootstrap 5.1，您现在可以使用间隙实用程序来实现此目的：

https://getbootstrap.com/docs/5.1/utilities/spacing/#gap

<div class="btn-group-vertical gap-3">
  <button type="button" class="btn btn-dark">Button</button>
  <button type="button" class="btn btn-dark">Button</button>
  <button type="button" class="btn btn-dark">Button</button>
  <button type="button" class="btn btn-dark">Button</button>
</div>

- Graham Reynolds