twitter-bootstrap 在 Bootstrap 3 中堆叠列时的垂直空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19822127/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertical space when stacking columns in Bootstrap 3
提问by tofutim
When columns are stacked in mobile mode, I would like some vertical space separating the column contents, how can I do this?
当列在移动模式下堆叠时，我想要一些垂直空间来分隔列内容，我该怎么做？
See jsfiddle in http://jsfiddle.net/tofutim/3sWEN/and vary the width of the output. There should be some spacing before the second lorem ipsum.
请参阅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>
采纳答案by Zim
One way would be with CSS that adds margin-bottom to col-*on smaller devices/widths..
一种方法是使用 CSScol-*在较小的设备/宽度上添加边距底部。
@media (max-width: 768px) {
[class*="col-"] {
margin-bottom: 15px;
}
}
Another way is to add a divthat is only visible on smaller devices/widths..
另一种方法是添加一个div仅在较小的设备/宽度上可见的..
<div class="col-sm-6">
<div class="hidden-lg hidden-md hidden-sm"> </div>
...
Demo: http://bootply.com/92276
Update 2019
2019 年更新
Bootstrap 4now has spacing utilitiesthat can be used.
Bootstrap 4现在具有可以使用的间距实用程序。
Also see: Add spacing between vertically stacked columns in Bootstrap 4
回答by S..
Use .form-groupon the columns
.form-group在列上使用
That is the bootstrap way. Other mentioned CSS hacks may work, but aren't the intended way to achieve what you want. Hacking up bootstraps CSS may lead to more work later when changing your bootstrap version.
这就是引导方式。其他提到的 CSS hacks 可能有效，但不是实现您想要的预期方式。在更改引导程序版本时，修改引导程序 CSS 可能会导致以后进行更多工作。
Bootply example: http://www.bootply.com/4cXfQkTCAm#
Bootply 示例：http: //www.bootply.com/4cXfQkTCAm#
回答by Tom
I wanted to have it working for when my columns stack at less than 991px and effect all but the first child so I put
我想让它在我的列堆叠小于 991px 并影响除第一个孩子之外的所有内容时工作，所以我把
@media (max-width: 991px) {
[class*="col-"]:not(:first-child){
margin-top: 40px;
}
}
回答by tahiche
A plain Bootstrap4, no extra CSS, hacks or mixin solution would be something like:
一个普通的 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>
This adds a margin-bottom (mb-3) but sets it to zero when not stacked (mb-md-0).
这会添加一个 margin-bottom (mb-3)，但在未堆叠时将其设置为零 (mb-md-0)。
Since media queries for spacing utils like "mb-3" apply to "everything over" (min-width) you need to do the oppsite and reset it to 0 (mb-XX-0) when not stacked. In this case we set it to stack under "md" (sm) so we set margin 0 at that breakpoint.
由于对诸如“mb-3”之类的间距实用程序的媒体查询适用于“所有内容”（最小宽度），因此您需要执行相反的操作，并在未堆叠时将其重置为 0 (mb-XX-0)。在这种情况下，我们将其设置为在“md”（sm）下堆叠，因此我们在该断点处设置边距 0。
Here′s a fork of your jsfiddle udated to include margin only on mobile. The "mb-3 mb-md-0" styles on columns show the proposed solution. (Jsfiddle version here: http://jsfiddle.net/cb9oc064/10/)
Here's a fork of your jsfiddle udated 仅在移动设备上包含边距。列上的“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>回答by Natan Rubinstein
Look at this example
http://getbootstrap.com/examples/carousel/When stacked There is a margin between the text and the 500*500 Image. This is because The text has <p>around it and its add margin bottom 20px
看这个例子
http://getbootstrap.com/examples/carousel/堆叠时 文字和 500*500 图片之间有边距。这是因为文本<p>周围有它并且它在底部添加边距 20px
回答by jsruok
Add a negative top margin to each row, and counter that margin on each column, like this:
为每一行添加一个负的顶部边距，并在每列上抵消该边距，如下所示：
.row {
margin-top: -10px;
}
[class^='col'], [class*=' col'] {
margin-top: 10px;
}
After columns start stacking they get the vertical margin between them.
列开始堆叠后，它们之间会获得垂直边距。
Works on all screen sizes.
适用于所有屏幕尺寸。
回答by Vikash Singh
Try using span instead of div with bootstrap classes.
尝试在 bootstrap 类中使用 span 而不是 div。
