RWD网格视图中的列（CSS响应）

Question

我正在学习CSS并且在lesson中遇到了这个W3school。我很难理解在网格视图中有这么多列类的目的是什么：

....
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
......

为什么将两个div元素放在colulmn-3和colulmn-9中，为什么会跳过其他元素？

  <div class="col-3">
  <ul>
......
  </ul>
</div>

<div class="col-9">
.....

Answer 1

我试着解释一下。请访问this Webseite了解更多信息。

在99％的案例中使用

网格视图来回应网站。

每行默认有12列。并且<div class="col-3">表示div应该只使用12列的12列。另一个<div class="col-9">应该使用12列的12列 所以你好3 + 9 = 12列。

我希望它有所帮助。

Answer 2

所以

12 = 100%
9 + 3 = 12 (100%)

如果你想要一个全宽，你需要总共12个，这将给你100％的容器

如果您想要3列，您将使用4 + 4 + 4 = 12

<div class="row">
   <div class="col-4">
   <div class="col-4">
   <div class="col-4">
</div>

Answer 3

这是一个简单的数学，同时采用列类div。

百分比加起来达到100％。像25％+ 75％= 100％

<强>实施例

2列：左侧25％，右侧75％

<div class="row">
    <div class="col-3">..</div>
    <div class="col-9">..</div>
</div>

2列：左边50％，右边50％

<div class="row">
    <div class="col-6">..</div>
    <div class="col-6">..</div>
</div>

3列：每列33％

<div class="row">
    <div class="col-4">..</div>
    <div class="col-4">..</div>
    <div class="col-4">..</div>
</div>