Css 1280px时4列,1024px时第3列低于第2列

Css 1280px时4列,1024px时第3列低于第2列,css,twitter-bootstrap-3,Css,Twitter Bootstrap 3,我刚开始使用bootstrap,无法计算如何使一列显示在媒体设备的另一列下面 大型设备 [A] [B] [C] [D] 媒体设备 [A] [B] [D] [C] 小型设备 [A] [B] [C] [D] 理想情况下,对于中等设备,我希望C列出现在B下,但看不到这样做的方法。所有列的宽度应相等。迷茫 抱歉,我刚开始读文件。我试着把B列和C列放在一个6列的div中,但在全尺寸下,它不会显示宽度相等的列,也不会显示B下的C列。这是我目前的布局 <div class="row">

我刚开始使用bootstrap,无法计算如何使一列显示在媒体设备的另一列下面

大型设备

[A] [B] [C] [D]
媒体设备

[A] [B] [D]
    [C]
小型设备

[A]
[B]
[C]
[D]
理想情况下,对于中等设备,我希望C列出现在B下,但看不到这样做的方法。所有列的宽度应相等。迷茫

抱歉,我刚开始读文件。我试着把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>

A列
B栏
C列
D列

这很简单。使用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>

A列
B栏
C列
D列

您忘记了包括您尝试过的内容以及它不起作用的原因或让您困惑的内容。在当前状态下,您的问题是对代码的请求。我已经添加了我迄今为止尝试过的内容,很抱歉,我刚刚开始学习引导。您似乎需要继续阅读文档,因为网格系统不是这样工作的。在像或这样的在线IDE中查看并使用它们。要以1024px的速度完全使用它们,您需要创建自定义css。正如下面引用的@CarrieKendall一样,最近的断点是992px或1200px。因此,您必须阅读有关引导的更多信息。很遗憾,这里的人都很开心。你的问题是正确的,你只是在寻找一些有用的方向。看看我的正确答案,但是-4投了反对票,它会让你走上正确的轨道。它会给你你想要的,你只需要修改BS断点来满足你特定的宽度要求,断点在“我投了反对票”中,因为您的示例和您的解释没有任何意义。在不添加任何有助于答案或讨论的内容的情况下进行反对投票的方法。实际上,我通过告诉您我投了反对票的原因,增加了讨论的内容。许多人不会(也不必)给出他们投票失败的原因。如果你的回答有意义且准确,我很乐意取消否决票:)