在 Bootstrap 3 中堆叠列时的垂直空间 [英] Vertical space when stacking columns in Bootstrap 3
本文介绍了在 Bootstrap 3 中堆叠列时的垂直空间的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当列在移动模式下堆叠时,我想要一些垂直空间来分隔列内容,我该怎么做?
在
<小时>2019 年更新
Bootstrap 4 现在具有可以使用的间距实用程序.
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.
<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>
解决方案
One way would be with CSS that adds margin-bottom to col-*
on smaller devices/widths..
@media (max-width: 768px) {
[class*="col-"] {
margin-bottom: 15px;
}
}
Another way is to add a div
that is only visible on smaller devices/widths..
<div class="col-sm-6">
<div class="hidden-lg hidden-md hidden-sm"> </div>
...
Demo: http://bootply.com/92276
Update 2019
Bootstrap 4 now has spacing utilities that can be used.
Also see: Add spacing between vertically stacked columns in Bootstrap 4
这篇关于在 Bootstrap 3 中堆叠列时的垂直空间的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文