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

Answer 1

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

 @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

---

2017年更新

Bootstrap 4现在有了可以使用的间隔工具 。

Answer 2

在列上使用.form-group

这是引导的方式。 其他提到的CSS黑客可能工作，但不是达到你想要的目的。 攻击bootstraps CSS可能会在以后更改引导版本时导致更多的工作。

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

Answer 3

我希望当我的列堆叠在less于991px的时候工作，除了第一个孩子以外，所有的东西都会影响到我

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

Answer 4

看看这个例子http://getbootstrap.com/examples/carousel/当堆叠文本和500 * 500图像之间有一个余量。 这是因为文本周围有<p> ，其添加页边距20px

Answer 5

为每一行添加一个负顶部边距，并在每一列上alignment该边距，如下所示：

 .row { margin-top: -10px; } .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { margin-top: 10px; } 

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

适用于所有屏幕尺寸。