引导 3 网格系统基本了解

Question

我一直在Zurb的基础逻辑下为我的网格系统工作。现在我第一次尝试在 3.0.2 版本中引导。我不明白的一件事是它的结构。

虽然 Zurb 的工作方式是这样的：

<div class="row">
    <div class="twelve columns">
    </div>
</div>

Bootstrap 具有 3 步结构以获得相同的结果：

<div class="row">
     <div class="container">
          <div class="col-lg-12">
          </div>
     </div>
</div>

我的问题是，"行"类代表什么？，在 css 上，它只设置了几个边距，并使用伪:after元素清除布局。有人可以解释一下这其中的逻辑吗？我确信那行是有原因的，但我找不到它。

Answer 1

.container的存在只是为了给你的布局一个固定的宽度（根据最终用户[响应]进行更改）。这个类实际上也应该只在页面上存在一次，并将所有.row元素包装在里面（因此名副其实 - 一个容器）。

Bootstrap 使用固定的 12 列布局，因此只需要两条信息：.row对新行进行排队，以及col-*-n类之一来破译该块应该占用多少列。

列也按三种主要布局细分：lg、md和sm每个布局对基于窗口视口的布局都有不同的影响。由于这三种变体，可以指定内容应根据浏览器功能进行更改（例如，在所有设备上显示三列（md和lg），但可以在移动设备上切换到两列（sm））。

话虽如此，最基本的布局仅包括：

<div class="row">
  <div class="col-md-12">
    single div consuming all 12 columns
  <div>
</div>

Answer 2

我对 TWBS3 有基本的了解，这是我的理解：

假设您的页面是一个表格，默认情况下，您有 12 列（如果您尚未自定义配置，则为此选项）。当您的元素具有类"col-*-*"时，您将仅使用 col 类定义的空间。在此基础上，如果你有 4 个元素与 col-lg-4 类，你将得到 3 个元素在行中，而第四个元素将在第二行中绘制。这是因为 3 个 col-lg-4 元素加起来有 12 列，因此第四个元素被推到其他元素下面。在某些情况下，元素都具有相同的高度（始终）可能是好的，但是当高度变化时，您会得到奇怪的结果，其中一些高度较小的元素在页面中绘制得更高一点。ROW 强制执行具有属于一行的元素的想法。就像有一个 12 列 n 行的表。前任：

要点1 ELEMENT2 要点3

---

要点4

使用 col-lg-4 的相同 4 个元素，您可以执行以下操作：

<div class=”row>
<div class=”col-lg-4”>Element 1</div><div class=”col-lg-4”>Element 2</div>
</div>
<div class=”row>
<div class=”col-lg-4”>Element 3</div><div class=”col-lg-4”>Element 4</div>
</div>

元素1 ELEMENT2

---

元素

3 元素4

因为您说您有两行，每行有两个元素，跨越 4 行，而您可用于该行的 12 行。

希望这对你有帮助。对不起英语不好。