0

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

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

有任何想法吗？谢谢！

4

2 回答 2

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>

示例结果

在此处输入图像描述

于 2018-11-30T15:24:54.217 回答
1

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

因此，对于流体宽度，我建议您只包装需要包含在 a 中的单元格.grid-container和不带 a 的流体单元格grid-container。

于 2018-12-19T22:27:18.607 回答