我想知道是否可以在Foundation 6.5 XY网格上为某些单元格设置全宽。
我知道可以将网格容器设置为流体或完整,但我的意图是在一个网格容器内将某些单元格设置为全宽
<div class="grid-container">
<div class="grid-x">
<div class="cell small-12">
Contained cell.
</div>
<div class="cell small-12 full-width-possible">
Full width cell possible?
</div>
<div class="cell small-12">
Contained cell.
</div>
</div>
</div>
除了创建一个单独的完整容器外,我没有找到其他选择。
有什么想法吗? 谢谢!
答案 0 :(得分:1)
我认为您想要的是一个嵌套单元格,其容器的宽度应与视口的边缘相同,而其容器的宽度应保持为1200px(无论Foundation的默认值是什么)。
您可以尝试的一种方法是使用偏移量。例如
HTML
<div class="grid-container full">
<div class="grid-x">
<div class="cell small-10 small-offset-1">
Contained cell.
</div>
<div class="cell small-12">
Full width cell possible?
</div>
<div class="cell small-10 small-offset-1">
Contained cell.
</div>
</div>
</div>
示例结果
答案 1 :(得分:1)
通过使用.small-12
,您可以将单元格的宽度设置为100%。
因此,对于流体宽度,我建议您只包装需要包含在.grid-container
中的单元格,而将流体单元格不包含grid-container
。