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

Question

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

请参阅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>

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

更新2018年

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>

这会添加一个底边空白（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/）

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

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