换行时在元素之间保持一点垂直 space？

Question

使用 Bootstrap，当我将一堆元素（例如 buttons）排成一行并缩小 window 时，元素环绕。

但是当 window 足够宽以包含彼此相邻的所有内容时，元素之间有一些水平 space，但垂直方向所有内容都粘在一起，空 [= 的像素为零31=]之间.

Live example（缩小或加宽输出window看效果）

截图示例：
1. Wide enough, notice space between buttons
2. 回绕，注意在彼此堆叠的按钮之间没有 space

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

Answer 1

Demo 对 Button 使用 Margin-bottom css。

    .btn{margin-bottom:10px;}

你可以用新的父class名字写这个css，以避免上面css影响其他页面。

Answer 2

这样试试：Demo

CSS:

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

Answer 3

查看下面的示例：

代码：

.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>

Example

Answer 4

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

我所做的是将 class 添加到按钮的父元素，并将样式继承到 class "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

Answer 5

对于 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 6

我正在使用这种方法：添加一个 div 和一些垂直 space:

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

css:

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

换行时在元素之间保持一点垂直 space？

Keeping a bit of vertical space between elements when they wrap?

html

css

whitespace

button

twitter-bootstrap