Question

我在新项目上使用新的Foundation XY网格。该网站的网格容器的最大宽度为1000px。一切都很好。

但是，我现在需要使用Foundation的Accordion组件为网站制作一个新组件。也没问题。问题，开始时，开放式手风琴元素的背景需要是另一种bg颜色，而不是父元素（边缘到边缘）。这不是问题，如果不是因为我需要填充页面的整个宽度 - 背景颜色。内容本身的最大宽度仍为1000px。

这是标准标记：

<div class="grid-container">
  <div class="grid-x grid-margin-x">
      <div class="large-12 cell">
            <ul class="accordion" data-accordion data-allow-all-closed="true">
                <li class="accordion-item" data-accordion-item>
                        <a href="#deeplink1" class="accordion-title">Accordion header</a>
                        <div class="accordion-content" data-tab-content id="deeplink1">
                            Accordion content
                        </div>
                </li>
            </ul>
    </div>
  </div>
</div>

以上按预期工作，并且与<body>具有相同的bg颜色 - 一切都很好。

但是，上面有一个变体，背景颜色与<body> bg颜色不同。要做到这一点，我只需将grid-container包裹在标注中，就像这样

<div class="secondary callout">
    <div class="grid-container">
        <div class="grid-x grid-margin-x">
            <!-- accordion markup -->
        </div>
    </div>
</div>

这也可以按预期工作。

当我打开手风琴项目时问题就出现了。手风琴项目的背景颜色需要具有来自<body>的背景颜色（或至少与来自＆＃39;辅助标注＆＃39;中的颜色不同）。但是，我如何以最佳方式实现这一目标？

示例：https://codepen.io/anon/pen/WXEMyp

通缉输出：

基础XY-Grid - 覆盖容器宽度

0 个答案: