在元素换行时在元素之间保留一点垂直空间

Question

Bootstrap当我放置一堆元素（例如 buttons ） 连续并缩小窗口，元素环绕。

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

实时示例（缩小或加宽输出窗口以查看效果）

截图示例：
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; }

它很容易记住，并且是解决此问题的快速方法。只需添加到您的主文件中.css即可。

Answer 3

尝试如下： 演示

.CSS：

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

Answer 4

检查以下示例：

法典：

.btn {
    margin: 10px auto;
}

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

例

Answer 5

我正在使用这种方法：添加一个带有一些垂直空间的div：

<div class="vspace1em"></div>

.css：

    div.vspace1em {
        clear: both;
        height: 1em;
    }

Answer 6

演示对按钮使用边距底部 css。

    .btn{margin-bottom:10px;}

您可以使用新的父类名编写此CSS，以避免上述CSS在其他页面中受到影响。