twitter-bootstrap - 在 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

一种方法是使用 CSScol-*在较小的设备/宽度上添加 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 中添加垂直堆叠列之间的间距

Answer 2

.form-group在列上使用

这就是引导方式。其他提到的 CSS hack 可能有效，但不是实现您想要的目标的预期方式。在更改引导程序版本时，修改引导程序 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”之类的间距实用程序的媒体查询适用于“所有内容”（最小宽度），因此您需要在未堆叠时将其重置为 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的图片之间有一个边距。这是因为文本<p>周围有它并且它的添加边距底部 20px

Answer 6

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

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

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

适用于所有屏幕尺寸。

Answer 7

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