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

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

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

请尝试以下操作： Demo

CSS：

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

Answer 4

Demo 使用Margin-bottom css for Button。

    .btn{margin-bottom:10px;}

你可以用新的父类名来编写这个css，以避免在其他页面中出现css影响。

Answer 5

检查下面的示例：

<强>代码：

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

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

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

的CSS：

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

（bootstrap）包裹时在元素之间保留一点垂直空间？

6 个答案: