为什么这些 bootstrap 列元素在移动设备中不堆叠

Question

这些元素的缩进级别。（完整 html 在 fiddle http://jsfiddle.net/gbq538x2/1/）

<div class="container">
    <div id="first" class="row">
        <div class="col-sm-12">

    <div id="second" class="col-md-3 col-lg-3 col-xs-3">
    <div id="third" class="col-md-9 col-lg-9 col-sm-9 col-xs-9">

我希望 #first 内部的 col-sm-12 与 #second 和 #third 堆叠，但是在移动设备上不会发生元素堆叠。

Answer 1

试图让你明白一些事情。

首先。让我们记住 bootstrap 3 的顺序（从最小的设备到最大的设备）：xs、sm、md、lg

当您现在定义 col-sm-12 时，这只表示 "take a col width of 12 for all sm devices and up"。当定义一个 col-anything 时，所有 classes below 也将有一个 width of 12，如果没有定义的话。所以你基本上定义in all sizes take a col width of 12。定义col-xs-12来实现这个比较好理解

现在看看col-md-3 col-lg-3 col-xs-3。对于大型设备，col-lg-3 会将列宽设置为 3。 col-md-3 会将中型设备的列宽设置为 3（及更高版本 [但这会被 col-lg 覆盖]），col-xs-3 会将列宽设置为 3对于最小的设备及以上设备（因为定义了 col-md 和 col-lg，所以只设置了 col-sm）。 基本上你定义 in all sizes thake a col width of 3也可以通过添加col-xs-3来实现。我认为您要实现的目标是：

col-sm-3 - 这将定义具有 width of 12 的所有 xs 设备和具有 width of 3.

的所有 sm and up 设备

类似于 col-md-9 col-lg-9 col-sm-9 col-xs-9，它是 col-xs-9 的同义词。

尝试以下操作：

<div class="container">
    <div id="first" class="row">
        <div class="col-xs-12">
            A column which has always a size of 12.
        </div>
        <div id="second" class="col-sm-3">
            A column which has a size of 3 for sm-devices and up and a size of 12 for xs-devices (mobile).
        </div>
        <div id="third" class="col-sm-9">
            A column which has a size of 9 for sm-devices and up and a size of 12 for xs-devices (mobile).
        </div>
    </div>
</div>

这将实现以下内容：对于移动设备，您有两行 - 一行宽度为 12 宽的列，另一行设备宽度为 3 和 9。对于所有更大的设备，您需要三行 - 每行一个全宽列。

为什么这些 bootstrap 列元素在移动设备中不堆叠

Why are these bootstrap col elements not stacking in mobile

responsive-design

twitter-bootstrap

responsiveness