如何在使用Bootstrap或CSS调整窗口大小时让孩子div停留在其他孩子之上
如何在使用Bootstrap或CSS调整窗口大小时让孩子div停留在其他孩子之上
提问于 2018-06-20 08:08:36
目前，当窗口是全尺寸时，我有类似这样的东西：
PARENT
>>> CHILD DIV A (to the left)
>>> CHILD DIV B (to the right)当窗口大小调整到一定程度时，它看起来如下所示：
PARENT
>>> CHILD DIV A (on top of CHILD DIV B)
>>> CHILD DIV B (below CHILD DIV A)然而，我希望它在调整大小时看起来像这样：
PARENT
>>> CHILD DIV A (below CHILD DIV B)
>>> CHILD DIV B (on top of CHILD DIV A)我的实际代码是这样的：
<PARENT (has a left and right margin only)>
<CHILD DIV A (has bootstrap classes)/>
<CHILD DIV B (has bootstrap classes)/>
</PARENT>使用的引导CSS：
.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 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: left;
}
.col-xs-12 {
width: 100%;
}我该如何做到这一点呢？我尝试使用align和float，但似乎什么都没有改变。谢谢你的建议!
Bootstrap编辑：我能够使用Bootstrap的push和pull解决这个问题。这个帖子帮了我很多：Bootstrap 3: Push/pull columns only on smaller screen sizes谢谢大家的帮助！
回答 1
Stack Overflow用户
发布于 2018-06-20 08:21:12
你可以在代码中将"div b“放在"div a”之前，将它们放在右边，然后使用媒体查询在一定的宽度上取消浮动。
<PARENT>
<CHILD DIV B />
<CHILD DIV A />
</PARENT>在css中：
child-div-a, child-div-b{
float: right;
}
@media all and (max-width:700px){
child-div-a, child-div-b {
float:none;
}
}试一试，告诉我它是否像你想象的那样工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50938483
复制相关文章
相似问题