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

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

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

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

一种方法是使用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现在具有可以使用的间距实用程序。

另请参阅：在Bootstrap 4中垂直堆叠的列之间添加间距

.form-group在列上使用

这是引导方式。其他提到的CSS hacks可能有效，但不是实现所需功能的预期方式。破解引导程序CSS可能会在以后更改引导程序版本时导致更多工作。

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

我想让它在我的列的堆积小于991px并影响除第一个孩子以外的所有对象时起作用，所以我把

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

一个普通的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>

这会添加一个底边空白（mb-3），但未堆叠时将其设置为零（mb-md-0）。

由于媒体对诸如“ mb-3”之类的间隔实用程序的查询适用于“一切都结束了”（最小宽度），因此您需要做一个oppsite，并在不堆叠时将其重置为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>

查看此示例 http://getbootstrap.com/examples/carousel/ 堆叠时文本和500 * 500图像之间有一个空白。这是因为该文本<p>周围有文字，其底边距增加了20px

向每行添加负的上边距，并在每一列上抵消该边距，如下所示：

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

列开始堆叠后，它们将获得它们之间的垂直边距。

适用于所有屏幕尺寸。

尝试对引导类使用span而不是div。