Question

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

虽然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＆amp; lg），但也可以在移动设备上切换为两列（{ {1}}））。

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

sm

Answer 2

我对TWBS3有基本的了解，我知道如何理解它：

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

元素1元素2元素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>

ELEMENT 1 ELEMENT2

元素3元素4

因为你说你有两行，每行有两行，在你可用于该行的十二行中有4行。

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

Bootstrap 3网格系统基本了解

2 个答案: