Twitter bootstrap 为什么更改引导行类的大小部分对输出没有影响？

在我的Meteor应用程序中，我正在尝试使用引导网格系统。我添加了twbs:bootstrap包，然后基于和添加了这段代码

{{>bootstrapper}
你好，世界（sm）！
同侧眼线

我明白了



你好，世界！（sm流体）
同侧眼线

我明白了



你好，世界（xs）！
同侧眼线

我明白了



你好，世界（md）！
同侧眼线

我明白了



你好，世界（lg）！
同侧眼线

我明白了

难题在于，它们在我的笔记本电脑上显示的都是相同的（第二个除外，它使用“容器流体”类而不是“容器”类，后者垄断了设备的整个宽度）：

我没有完全理解不同大小的概念，因为我认为引导网格系统的整体，或者至少主要的一点是使页面响应，这样它就会自动调整屏幕大小，无论是xs、sm、md还是lg。那么，为什么这些名称是必要的，为什么它们似乎没有任何效果呢

更新 好的，我看到这些尺寸等级可以组合，如下所示：

<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 1</p></div>

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><p>Box 1</p></div>

框1

…因此，我假设您可以简单地为所有意外事件（设备大小）做好准备，例如：

<div class="col-sm-6 col-md-4 col-lg-3"><p>Box 1</p></div>

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><p>Box 1</p></div>

框1

…但这仍然让我想知道重点是什么，那么-如果你必须全部指定，引导的自动性在哪里

更新2 为此：

<div class="container">
  <h1>Hello World (md)!</h1>
  <div class="row">
    <div class="col-md-1" style="background-color:red;">
      <p>Lorem ipsum...</p>
    </div>
    <div class="col-md-2" style="background-color:yellow;">
      <p>Sed ut perspiciatis...</p>
    </div>
    <div class="col-md-3" style="background-color:green;">
      <p>Third 3</p>
    </div>
    <div class="col-md-4" style="background-color:blue;">
      <p>Fourth 4</p>
    </div>
    <div class="col-md-2" style="background-color:purple;">
      <p>Fifth 2</p>
    </div>
  </div>
</div>

你好，世界（md）！
同侧眼线

我明白了

第三个3

第四个4

第五个2

…如果更改浏览器窗口的大小，它会将每列放在自己的行上，或将所有列放在一行上（有1列或5列，中间没有）。我不知道这给了我什么，除了根本不使用引导

如果我将类从“container”更改为“container fluid”，那么这也是事实，所以在这一点上，我肯定想知道所有的喧嚣是关于什么的

我的意思是，我知道使用类名加上12的数字是布置网格的一种简单方法（使用加起来12的任何宽度组合，例如12 1s、6 2s、4 3s或[1,2,3,4,2]或[1,9,2]或其他任何东西），但我并没有看到它对网格内容的响应性重新定位有什么帮助，除非它只满足于一行或十二行。所以我看不出“xs”、“sm”、“md”或“lg”指示符/断点给我带来了什么附加值

更新3

---

好的，我现在知道了，在看了之后-这是你们都告诉我的，但我想我必须听到它和/或看到它的运行来摸索它。

列类与列开始堆叠的时间有关：

列lg：堆栈宽度低于1200px

col md：堆叠宽度低于992px

列sm：堆栈宽度低于768px

列：列永远不会堆叠

编辑：为了进一步说明这一点，类后面的数字（col-lg-12、col-sm-3等）决定了div将占用多少列。在Bootstrap中，文档由12列组成，因此您可以有一个col-lg-9和一个col-lg-3，它们一起占据整个页面的宽度

<div class="col-lg-9"></div>
<div class="col-lg-3"></div>

这将导致“col-lg-9”分区占据页面左侧75%的空间，而“col-lg-3”分区占据页面右侧25%的空间

<div class="col-lg-9"></div>
<div class="col-lg-3"></div>

因为如果屏幕宽度低于1200px，这些列是col lg，因此列将移动到彼此的顶部，而后一个div移动到前一个div的下方，此时它们将占据整个屏幕的宽度

在另一种情况下，例如：

<div class="col-lg-9"></div>
<div class="col-md-3"></div>

高于1200px时，其行为与上一示例完全相同，但低于1200px时则有所不同。当屏幕宽度低于1200px时，“col-lg-9”div将移动以占据整个屏幕宽度，“col-md-3”div将移动到其下方，但它仍将仅占据屏幕的25%，直到移动到992px断点下方，然后在该断点下方拉伸以占据整个屏幕

框1

…但这仍然让我想知道重点是什么-如果你 必须详细说明，引导的自动性在哪里

xs/sm/md/lg称为断点。在某些点上，布局会发生变化。神奇的是，您可以准确地决定布局的宽度，以及何时应该换行，甚至何时应该隐藏

---

lg影响所有大小，xs只影响最小的一个大小

你能用相关代码添加JSFIDLE吗？最好转到引导文档本身并在那里更改屏幕大小。将看到why@North达科塔：在JSFIDLE中就不一样了，因为它不理解空格键（Meteor），也不内置引导类。我还是不去摸索它，因为不管我给它设置了什么断点，它在我的笔记本电脑上看起来都是一样的。瞧，我该如何用我的设备（我假设是md或lg）将列打断到另一行？

Mobile 100%宽度和desktop 100%宽度全部在新行：Mobile 100%宽度和desktop 50%宽度

那么这些数字有什么影响呢？他们的理由是什么？