Question

当列以移动模式堆叠时，我想要一些垂直空间来分隔列内容，我该怎么做？

请参阅http://jsfiddle.net/tofutim/3sWEN/中的jsfiddle并改变输出的宽度。在第二个lorem ipsum之前应该有一些间距。

enter image description here

<div class="container">
    <div class="well well-lg" style="margin:10px">
    <div class="row">
        <div class="col-sm-6">
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
            <form>               
                <input type="textbox" class="form-control" placeholder="Username"></input>
                <input type="password" class="form-control" placeholder="Password"></input>                     
            </form>
        </div>
        <div class="col-sm-6">
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
            <form role="form">
                <div class="form-group">  
                    <button class="form-control btn btn-default">Push me</button>
                <input type="textbox" class="form-control" placeholder="Username"></input>
                <input type="password" class="form-control" placeholder="Password"></input>            
                </div>
            </form>
        </div>
    </div>
    </div>
</div>

Answer 1

使用CSS的一种方法是在较小的设备/宽度上为col-*添加margin-bottom ..

@media (max-width: 768px) {

  [class*="col-"] {
      margin-bottom: 15px;
  }

}

另一种方法是添加仅在较小的设备/宽度上可见的div ..

 <div class="col-sm-6">
    <div class="hidden-lg hidden-md hidden-sm">&nbsp;</div>
        ...

演示：http://bootply.com/92276

更新2019

Bootstrap 4 现在可以使用spacing utilities。

另见：Add spacing between vertically stacked columns in Bootstrap 4

Answer 2

在列

上使用.form-group

这是引导方式。其他提到的CSS黑客可能有效，但不是实现你想要的目标。黑客攻击引导CSS在更改引导程序版本后可能会导致更多工作。

Bootply示例：http://www.bootply.com/4cXfQkTCAm#

Answer 3

我想让它工作的时候我的列堆叠在991px以下并影响除第一个孩子以外的所有列，所以我把

@media (max-width: 991px) { 
  [class*="col-"]:not(:first-child){
      margin-top: 40px;
  }
}

Answer 4

一个简单的Bootstrap4，没有额外的CSS，hacks或mixin解决方案就像：

<div class="row">
    <div class="col-md-3 mb-3 mb-md-0">
    ....
    </div>
    <div class="col-md-9 mb-3 mb-md-0">
    ....
    </div>
</div>

这会增加一个margin-bottom（mb-3），但在没有堆叠时将其设置为零（mb-md-0）。

由于像“mb-3”这样的间距工具的媒体查询适用于“一切都超过”（最小宽度），你需要做对手并在没有堆叠时将其重置为0（mb-XX-0）。在这种情况下，我们将其设置为在“md”（sm）下堆叠，因此我们在该断点处设置边距为0.

这是你的jsfiddle的一个分支，只在移动设备上包含保证金。列上的“mb-3 mb-md-0”样式显示了建议的解决方案。（这里有Jsfiddle版本：http://jsfiddle.net/cb9oc064/10/）

@import url('https://getbootstrap.com/dist/css/bootstrap.css');

<div class="container">
    <div class="well well-lg" style="margin:10px">
    <div class="row">
        <div class="col-sm-6 mb-3 mb-md-0">
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
            <form>   
            <div class="form-group"> 
                <input type="textbox" class="form-control " placeholder="Username"></input>
                </div>    
                <div class="form-group"> 
                <input type="password" class="form-control " placeholder="Password"></input>   
                </div>
            </form>
        </div>
        <div class="col-sm-6 mb-3 mb-md-0">
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
            <form role="form">
                <div class="form-group">  
                    <button class="form-control btn btn-default">Push me</button>
                <input type="textbox" class="form-control" placeholder="Username"></input>
                </div>
                <div class="form-group mb-3 ">
                <input type="password" class="form-control" placeholder="Password"></input>            
                </div>
            </form>
        </div>
    </div>
    </div>
</div>

Answer 5

看看这个例子 http://getbootstrap.com/examples/carousel/ 堆叠时文本和500 * 500图像之间有一个边距。这是因为文本周围有onCreate，其附加边距为20px

Answer 6

为每一行添加一个负的上边距，并在每列上计算该边距，如下所示：

.row {
  margin-top: -10px;
}
[class^='col'], [class*=' col'] {
  margin-top: 10px;
}

在列开始堆叠后，它们会得到它们之间的垂直边距。

适用于所有屏幕尺寸。

Answer 7

尝试使用span而不是div和bootstrap类。

在Bootstrap 3中堆叠列时的垂直空间

7 个答案: