强制引导列位于2列布局中其他列的下方
强制引导列位于2列布局中其他列的下方
提问于 2015-08-12 18:19:38
这是我的代码：
<div class="container">
<div class="row">
<div class="col-md-6">
A
</div>
<div class="col-md-6">
B
</div>
<div class="col-md-6">
C
</div>
</div>
</div>它充满了实际内容，看起来有点像这样：http://www.bootply.com/JZj51T1G1E#
在不改变HTML结构的情况下，有没有办法强制B显示在左侧的A下面？C仍然应该留在右边。我尝试使用pull-6，但这导致它在A上显示。
回答 4
Stack Overflow用户
发布于 2015-08-12 18:34:49
如果无法更改标记，则可以使用flexbox重新排列它
使用来支持稍微老一点的浏览器。全屏输出。
.col-md-6:nth-child(1) {
background-color: #f00;
}
.col-md-6:nth-child(2) {
background-color: #ff0;
}
.col-md-6:nth-child(3) {
background-color: #f0f;
}
@media (min-width: 992px) {
.row {
display: flex;
flex-flow: row wrap;
}
.col-md-6:nth-child(2) {
order: 3;
}
.col-md-6:nth-child(3) {
order: 2;
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<br>A
<br>A
<br>A
<br>A
<br>A
<br>A
<br>A
<br>A
<br>A
<br>A
<br>A
<br>A
<br>A
<br>A
<br>A
<br>A
<br>A
<br>A
<br>A
<br>A
</div>
<div class="col-md-6">
<br>B
<br>B
<br>B
<br>B
<br>B
<br>B
<br>B
<br>B
<br>B
<br>B
<br>B
<br>B
</div>
<div class="col-md-6">
<br>C
<br>C
<br>C
<br>C
<br>C
<br>C
<br>C
<br>C
<br>C
<br>C
<br>C
<br>C
<br>C
</div>
</div>
</div>
Stack Overflow用户
发布于 2015-08-12 18:33:42
您每行包装的cols超过12个。请按如下方式包装每行12个或更少的cols：
<div class="container">
<div class="row">
<div class="col-md-6">
A
</div>
</div>
<div class="row">
<div class="col-md-6">
B
</div>
<div class="col-md-6">
C
</div>
</div>
</div>上面的代码结构是在bootstrap中添加列的正确方式，它还可以按照您的需要将B移到A下方的左侧。
Stack Overflow用户
发布于 2015-08-12 18:34:01
将clear:left添加到第二个div的CSS中。然而，这不会改变C也在A之下的事实。
HTML
<div class="container">
<div class="row">
<div class="col-md-6">
A
</div>
<div class="col-md-6 second-col">
B
</div>
<div class="col-md-6">
C
</div>
</div>
</div>CSS
.second-col{
clear:left;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31962385
复制相关文章
相似问题
腾讯云开发者
