某些单元格的XY基础网格全宽

时间:2018-11-29 03:52:50

标签: css zurb-foundation full-width xy-grid

我想知道是否可以在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>

除了创建一个单独的完整容器外,我没有找到其他选择。

有什么想法吗? 谢谢!

2 个答案:

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

示例结果

enter image description here

答案 1 :(得分:1)

通过使用.small-12,您可以将单元格的宽度设置为100%。

因此,对于流体宽度,我建议您只包装需要包含在.grid-container中的单元格,而将流体单元格不包含grid-container