html - 换行时在元素之间保持一点垂直空间？

Question

使用 Bootstrap，当我将一堆元素(例如 buttons)排成一行并缩小窗口时，元素会环绕。

但是，虽然当窗口足够宽以包含彼此相邻的所有内容时，元素之间存在一些水平空间，但垂直方向上的所有内容都会粘在一起，其间的空白空间为零像素。

Live example (缩小或加宽输出窗口以查看效果)

截图示例:
1. Wide enough, notice space between buttons
2. Wrapping around, notice NO space between the buttons stacked on top of each other

我想我可能会弄乱一些自定义 CSS，添加垂直边距或诸如此类的东西，但为了尽可能保持兼容性和标准，我想知道是否有更好或更原生的方法来在 Bootstrap 中修复此问题布局？

Answer 1

这里发生的是按钮显示为内联 block ，默认情况下这些元素没有空白或边距。您可以使用以下方法来避免这种情况。

我所做的是向按钮的父元素添加一个类，并将样式继承给类“btn”。

html

<div class='container'>
    <div class='row'>
        <div class='col-xs-12 button-wrapper'>
            <button class='btn btn-primary'>Lorem ipsum dolor sit amet</button>
            <button class='btn btn-info'>consectetur adipiscing elit</button>
            <button class='btn btn-success'>sed do eiusmod tempor incididunt</button>
        </div>
    </div>
</div>

CSS

.button-wrapper .btn {
    margin-bottom:5px;
}

Demo