Question

我刚刚开始使用bootstrap，但无法确定如何使列显示在介质设备的另一列下面。

大型设备

[A] [B] [C] [D]

中型设备

[A] [B] [D]
    [C]

小型设备

[A]
[B]
[C]
[D]

理想情况下，我希望在B下出现C列用于中型设备，但是看不到这样做的方法。所有列应具有相等的宽度。混淆

嘿抱歉，刚开始阅读文档。我已经尝试将B列和C列放在6列div中，但是在完整大小的情况下，它不显示宽度相等的列，并且不显示b下的c。这是我目前的布局。

<div class="row">
    <div class="col-lg-3 col-md-4 col-sm-12">Column A</div>
    <div class="col-lg-3 col-md-4 col-sm-12">Column B</div>
    <div class="col-lg-3 col-md-4 col-sm-12">Column C</div>
    <div class="col-lg-3 col-md-4 col-sm-12">Column D</div>
</div>

Answer 1

非常简单。使用Bootstrap 3，您可以从最小到最大构建。所以默认应该是你的第三种情况。我不记得默认xs断点的宽度是什么，但如果低于500，你仍然没有得到单列只是添加类.col-sm-12 A-D。

然后添加.col-md-4以获取您的媒体案例。您可能需要将.col-md-offset-4添加到[D]才能获得所需的定位。

最后给每个A-D课程.col-lg-3

应该这样做：

<div class="row">
    <div class="col-md-3">Column A</div>
    <div class="col-md-6 row">
        <div class="col-md-12 col-lg-6">Column B</div>
        <div class="col-md-12 col-lg-6">Column C</div>
    </div>
    <div class="col-md-3">Column D</div>
</div>

4列1280px，第3列低于第2列，1024px

1 个答案: