Question

当前，当窗口为全尺寸时，我会有类似的内容：

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>

使用了BOOTSTRAP 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 3: Push/pull columns only on smaller screen sizes谢谢大家的帮助！

Answer 1

您可以通过在代码中的“ div a”之前添加“ div b”，然后将它们浮动到右侧，然后使用媒体查询以特定宽度浮动来实现。

<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;
    }
}

尝试一下，告诉我它是否像您想象的那样工作。

使用Bootstrap或CSS调整窗口大小时，如何使子div保持在其他子之上

1 个答案: