0

我一直在 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元素清除了布局。有人可以解释一下这个的逻辑吗？我确定那一行是有原因的，但我找不到。

4

2 回答 2

2

.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>
于 2013-11-12T16:44:37.320 回答
0

我有 TWBS3 的基本知识，这就是我对它的理解：

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

要素 1 要素 2 要素 3

要素 4

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

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

要素 1 要素 2

要素 3 要素 4

因为您是说您有两行，每行有两个元素，跨越 4 行，在您可用于该行的十二行中。

希望这对您有所帮助。抱歉英语不好。

于 2013-11-12T16:53:17.757 回答