骨架：列内的两个嵌套行 - 如何？

Posted 2023-02-16

【中文标题】骨架：列内的两个嵌套行 - 如何？

【英文标题】：skeleton : two nested rows inside columns - howto?

【发布时间】：2015-06-08 18:26:48

【问题描述】：

我是骨架新手，只是把手放在上面。我无法将 1 行与 4 列块内部和 8 列块的混合工作，其中 8 列块内部应该是 2 个嵌套行。它只会炸毁所有网格。

我尝试创建一种图片库。 （抱歉，我还不能发布图片示例）

所以按照我的逻辑应该是（只是示例代码，不是真实的）：

<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>  

我遵循了我在互联网上找到的一些描述。但不工作 知道行和列的构造应该是什么样子吗？

【参考方案1】：

找到解决方案：

我的错误：第二组列包含嵌套行。此行不包含父列组位的 8 列，行类 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> 

这会在嵌套行内产生一点额外的间距，但可以通过额外的样式来纠正。