Question

当将页面调整为较小的宽度时，我希望三个col- #divs仅在某个点之后堆叠在彼此之上。就像现在一样，col-3 div在我调整页面大小后立即进入;和col-2重新调整<h3>和<p>文本，直到其宽度为301px，然后再叠加。是什么决定了这些“堆积点”，所以我可以控制它们？我找不到房产。 PrtSc：columns stacking （在我将所有3列的宽度与百分比（25％，50％，25％）之前，并且在调整屏幕大小时内容重叠之前）

<!-- HTML starts here. This inside a colophon a footer -->

<div class="engage-row">
    <div class="col-1">
        <img src="">
    </div>
    <div class="col-2">
        <h3>
        </h3>
        <p>
        </p>
        Signup Form
    </div>
    <div class="col-3">
        <img src="">
    </div>
</div>

<div class="footer-wfix
</div>
<!-- HTML ends here -->

/* In CSS, in the child-theme I have this */

.engage-row:after {
   content: "";
   display: inline-table;
   clear: both;
}
.col-1{
    float: left;
    width: 301px;
}
.col-2{
    float: left;
    width: 50%;
    padding: 10px 20px 0px 20px;
.col-3{
    float: left;
    width: 301px;
}
.footer-wfix {
    clear: both;
}

感谢。

Answer 1

这是一个带有工作堆栈示例的Bootply以及它们堆叠的像素。这由screenize列修饰符指定（更多内容见下文）。

http://www.bootply.com/ygqBb2GxrV#

你不想把所有可堆叠的东西包装在它自己的“行” - 重叠的div中。然后在列类（即col-md-5）上使用screenize修饰符

xs - 超小屏幕 sm - 小屏幕 md - 中型设备 lg - 大屏幕

调整屏幕大小时如何控制内联与堆叠？

1 个答案: