骨架:列内的两个嵌套行 - 如何?
skeleton : two nested rows inside columns - howto?
我是骨架的新手,只是把手放在上面。我无法混合使用 1 行和 4 列块内部,然后是 8 列块,其中 8 列块内部应该是 2 个嵌套行。它只是吹了所有的网格。
我尝试创建一种图片库。
(抱歉,我还不能 post 图片示例)
所以按照我的逻辑应该是(只是示例代码,不是真实代码):
<div class="container">
<div class="row">
<div class="four columns">
Picture content
</div>
<div class="eight columns">
<div class="row">
<div class="four columns alpha">
Picture content
</div>
<div class="four columns omega">
Picture content
</div>
</div>
<div class="row">
<div class="eight columns">
Picture content
</div>
</div>
</div>
</div>
我遵循了我在互联网上找到的一些描述。但不工作
知道行和列的结构应该是什么样子吗?
找到的解决方案:
我的错误:第二组列包含嵌套行。此行不包含父列组位的 8 列 row-class div 始终包含 12 列,独立于整行或只是行的一部分(如果是嵌套行)
所以正确的代码是这样的:
<div class="container">
<div class="row">
<div class="four columns">
Picture content
</div>
<div class="eight columns">
<div class="row">
<div class="six columns alpha">
Picture content
</div>
<div class="six columns omega">
Picture content
</div>
</div>
<div class="row">
<div class="twelve columns">
Picture content
</div>
</div>
</div>
</div>
</div>
这会导致嵌套行内有一点额外的间距,但可以通过额外的样式来纠正。
我是骨架的新手,只是把手放在上面。我无法混合使用 1 行和 4 列块内部,然后是 8 列块,其中 8 列块内部应该是 2 个嵌套行。它只是吹了所有的网格。
我尝试创建一种图片库。 (抱歉,我还不能 post 图片示例)
所以按照我的逻辑应该是(只是示例代码,不是真实代码):
<div class="container">
<div class="row">
<div class="four columns">
Picture content
</div>
<div class="eight columns">
<div class="row">
<div class="four columns alpha">
Picture content
</div>
<div class="four columns omega">
Picture content
</div>
</div>
<div class="row">
<div class="eight columns">
Picture content
</div>
</div>
</div>
</div>
我遵循了我在互联网上找到的一些描述。但不工作 知道行和列的结构应该是什么样子吗?
找到的解决方案:
我的错误:第二组列包含嵌套行。此行不包含父列组位的 8 列 row-class div 始终包含 12 列,独立于整行或只是行的一部分(如果是嵌套行)
所以正确的代码是这样的:
<div class="container">
<div class="row">
<div class="four columns">
Picture content
</div>
<div class="eight columns">
<div class="row">
<div class="six columns alpha">
Picture content
</div>
<div class="six columns omega">
Picture content
</div>
</div>
<div class="row">
<div class="twelve columns">
Picture content
</div>
</div>
</div>
</div>
</div>
这会导致嵌套行内有一点额外的间距,但可以通过额外的样式来纠正。