(bootstrap)包裹时在元素之间保持一点垂直空间？

Question

使用Bootstrap,当我将一堆元素(例如按钮)放在一行并缩小窗口时,元素会回绕.

但是当窗口足够宽以包含彼此旁边的所有内容时,元素之间存在一些水平空间,垂直所有内容都会粘在一起,其间的空白空间为零像素.

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

屏幕截图示例:
1.足够宽,注意按钮之间的空间
2. 环绕,注意彼此顶部堆叠的按钮之间没有空间

我想我可以搞乱一些自定义CSS,添加垂直边距或诸如此类的东西,但为了尽可能保持兼容和标准,我想知道是否有更好或更多的本机方法来修复Bootstrap布局？

Answer 1

这里发生的是按钮显示为内联块,默认情况下这些元素没有空格或边距开始.您可以使用以下方法来避免这种情况.

我所做的是在按钮的父元素中添加一个类,并将样式继承到类"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;
}

演示

Answer 2

使用Bootstrap,我总是喜欢使用类来添加顶部和底部边距:

.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }

.bottom5 { margin-bottom:5px; }
.bottom7 { margin-bottom:7px; }
.bottom10 { margin-bottom:10px; }
.bottom15 { margin-bottom:15px; }
.bottom17 { margin-bottom:17px; }
.bottom30 { margin-bottom:30px; }

它很容易记住,并且可以快速解决这个问题.只需添加到main.css文件即可.

Answer 3

试试这样:演示

CSS:

 @media (max-width: 779px) {
     .btn{
         margin-bottom:10px;
 }