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

Question

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

  {{> bootstrapper}}
</body>

<template name="bootstrapper">
  <div class="container">
    <h1>Hello World (sm)!</h1>
    <div class="row">
      <div class="col-sm-6" style="background-color:lavender;">
        <p>Lorem ipsum...</p>
      </div>
      <div class="col-sm-6" style="background-color:lavenderblush;">
        <p>Sed ut perspiciatis...</p>
      </div>
    </div>
  </div>
  <br/>
  <div class="container-fluid">
    <h1>Hello World! (sm-fluid)</h1>
    <div class="row">
      <div class="col-sm-6" style="background-color:lavender;">
        <p>Lorem ipsum...</p>
      </div>
      <div class="col-sm-6" style="background-color:lavenderblush;">
        <p>Sed ut perspiciatis...</p>
      </div>
    </div>
  </div>
  <br/>
  <div class="container">
    <h1>Hello World (xs)!</h1>
    <div class="row">
      <div class="col-xs-6" style="background-color:lavender;">
        <p>Lorem ipsum...</p>
      </div>
      <div class="col-xs-6" style="background-color:lavenderblush;">
        <p>Sed ut perspiciatis...</p>
      </div>
    </div>
  </div>
  <br/>
  <div class="container">
    <h1>Hello World (md)!</h1>
    <div class="row">
      <div class="col-md-6" style="background-color:lavender;">
        <p>Lorem ipsum...</p>
      </div>
      <div class="col-md-6" style="background-color:lavenderblush;">
        <p>Sed ut perspiciatis...</p>
      </div>
    </div>
  </div>
  <br/>
  <div class="container">
    <h1>Hello World (lg)!</h1>
    <div class="row">
      <div class="col-lg-6" style="background-color:lavender;">
        <p>Lorem ipsum...</p>
      </div>
      <div class="col-lg-6" style="background-color:lavenderblush;">
        <p>Sed ut perspiciatis...</p>
      </div>
    </div>
  </div>
  <br/>
</template>

难题是它们在我的笔记本电脑上都显示相同（第二个除外，它使用 "container-fluid" class 而不是 "container" class, 独占设备的整个宽度):

我不太理解不同大小的概念，无论如何，因为我认为 bootstrap 网格系统的全部或至少主要点是使页面响应，以便它会自动调整到屏幕尺寸，无论是 xs、sm、md 还是 lg。那么，为什么这些指定是必要的，为什么它们似乎没有任何效果？

更新

好的，我看到这些尺寸 class 可以合并，像这样：

<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>

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

更新 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>

...如果我更改浏览器的大小 window，它要么将每一列放在自己的行中，要么将所有列放在一行中（有 1 列或 5 列，没有之间）。除了根本不使用 bootstrap 之外，我不确定这给了我什么...

如果我将 class 从 "container" 更改为 "container-fluid" 也是如此所以在这一点上我肯定想知道所有的喧嚣是什么。

我的意思是，我知道使用 class 名称和加起来为 12 的数字是布局网格的简单方法（使用加起来为 12 的任意宽度组合，例如 12 1s , 6 2s, 4 3s, 或 [1,2,3,4,2] 或 [1,9,2] 或其他任何东西），但我没有看到它如何帮助响应式重新定位网格内容 - 除非安顿一排或十二排就是它所做的一切。所以我看不出 "xs"、"sm"、"md" 或 "lg" designators/breakpoints 给我带来了什么附加价值。

更新 3

好的，看完之后我现在明白了 this video - 这就是你们告诉我的，但我想我必须听到它 and/or 看到它的实际效果想通了。

Answer 1

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

col-lg：堆栈宽度低于 1200px

col-md: 堆栈宽度低于 992px

col-sm：堆栈宽度低于 768px

col-xs：列永远不会堆叠

编辑：为了进一步发展，类之后的数字（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' div 占据页面左侧的 75%，而 'col-lg-3' div 将占据页面的右侧页面的 25%。

因为它们是 col-lg 如果屏幕宽度低于 1200 像素，这些列将移动到彼此堆叠，而后者 div 移动到前一个下方，此时它们都将占据屏幕的全宽。

另一种情况如：

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

在 1200 像素以上，这将与前面的示例完全相同，但在 1200 像素以下，它将有所不同。当屏幕宽度低于 1200px 时，'col-lg-9' div 将移动以占据屏幕的整个宽度，而 'col-md-3' div 将移动到其下方，但它仍然只会占据屏幕的 25%，直到您移动到 992px 断点以下，然后它会拉伸以占据整个屏幕。

Answer 2

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><p>Box 1</p></div> ...but that still makes me wonder what the point is, then - if you have to specify it all, where is the automagicality of bootstrap?

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

lg 影响所有尺寸，xs 只影响最小的一个尺寸。

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

Why does changing the size portion of the bootstrap row class make no difference in output?

twitter-bootstrap

meteor

spacebars

meteor-blaze

更新

更新 2

更新 3