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

【问题标题】：Keeping a bit of vertical space between elements when they wrap?换行时在元素之间保持一点垂直空间？
【发布时间】：2015-07-08 08:55:04
【问题描述】：

使用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，添加垂直边距或诸如此类的东西，但为了使事情尽可能兼容和标准，我想知道是否有更好或更原生的方法来解决这个问题布局？

【问题讨论】：

重复：stackoverflow.com/questions/17809671/…stackoverflow.com/questions/21981117/…stackoverflow.com/questions/18918921/…

标签： html css twitter-bootstrap button whitespace

【解决方案1】：

Demo 为 Button 使用 Margin-bottom css。

    .btn{margin-bottom:10px;}

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

【讨论】：

【解决方案2】：

试试这样：Demo

CSS：

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

【讨论】：

为我工作，无需自定义 html。
是的，这对我来说似乎有点烦人，但我认为这是迄今为止我见过的最好的解决方案。如果引导程序有一些类只根据边距和事物的不同大小激活（如mt-sm-10、mb-md-20 等），那将是有意义的。我想知道这些是否值得添加？

【解决方案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

【讨论】：

有趣，边距部分的auto 是什么？

【解决方案4】：

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

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

【讨论】：

即使在足够宽以在一行上显示按钮的屏幕上也有边距。这个答案就是你避免这种情况的方法 - stackoverflow.com/questions/30887071/…

【解决方案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 文件即可。

【讨论】：

对我不起作用。由于浮动或显示设置，这些类可能无法与某些引导类结合使用。但我找到了类似的替代方案，请参阅我的解决方案

【解决方案6】：

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

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

css:

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

【讨论】：

这个解决方案比在引导元素中添加边距要干净得多。