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

Question

在我的 Meteor 应用程序中，我正在尝试使用 Bootstrap 网格系统。我添加了 twbs:bootstrap 包，然后添加了这段代码，基于 this 和 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”类而不是“container”类，它垄断了设备的整个宽度） ：

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

更新

好的，我看到这些size 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>

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

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

...如果我更改浏览器窗口的大小，它将把每一列放在自己的行上，或者将所有列放在一行上（有 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

好的，我现在知道了，在观看 this video 之后 - 这是你们都告诉我的，但我想我必须听到它和/或看到它在行动中才能理解它。

Answer 1

colclass 与列何时开始堆叠有关：

col-lg：堆栈宽度低于 1200 像素

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

col-sm：堆栈宽度低于 768 像素

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 像素时，'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> ...但这仍然让我想知道重点是什么，那么 - 如果你 必须全部指定，bootstrap的自动性在哪里？

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

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