Bootstrap 3中堆叠列时的垂直空间
Bootstrap 3中堆叠列时的垂直空间
提问于 2013-11-07 04:27:19
当列在移动模式下堆叠时，我想要一些垂直空间来分隔列内容，我该怎么做呢？
请参阅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>回答 6
Stack Overflow用户
发布于 2015-02-17 18:46:23
在列上使用.form-group
这就是自举方式。其他提到的CSS hack可能会起作用，但不是实现你想要的东西的预期方式。修改引导CSS可能会在以后更改引导版本时导致更多的工作。
Stack Overflow用户
发布于 2013-11-16 19:54:38
我想让它在我的列堆叠小于991px时工作，并影响除第一个孩子之外的所有列，所以我将
@media (max-width: 991px) {
[class*="col-"]:not(:first-child){
margin-top: 40px;
}
}Stack Overflow用户
发布于 2018-01-11 00:56:20
一个普通的Bootstrap4，没有额外的CSS，hacks或混合解决方案将是这样的：
<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“等间隔工具的媒体查询适用于"everything over”(最小宽度)，因此您需要执行相反的操作，并在未堆叠时将其重置为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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19822127
复制相关文章
相似问题