global-width不适用于基金会的新XY网格

Question

我正在使用最新的jointsWP，它使用的是Foundation 6.5。之前我没有任何问题地使用过弹性网格。我以为我可以尝试一下新的xy网格，因为它具有一些方便的功能。但是全局宽度无效。在_settings.scss中，我有这些：

$global-width: 1150px;
$xy-grid: true;

在style.scss中：

// Select the grid you would like to use
// @include foundation-grid;
// @include foundation-flex-grid;
@include foundation-xy-grid-classes;

// @include foundation-flex-classes;
@include foundation-visibility-classes;
@include foundation-float-classes;

在footer.php中：

<div class="inner-footer grid-x grid-margin-x grid-padding-x">

    <div class="small-12 medium-12 large-12 cell">
        <nav role="navigation">
            <?php joints_footer_links(); ?>
        </nav>
    </div>

    <div class="small-12 medium-12 large-12 cell">
        <p class="source-org copyright">&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>.</p>
    </div>

</div>

但是它在浏览器中变得全角。我不确定我在这里缺少什么。 Kinda还在foundation-grid和foundation-xy-grid-classes之间感到困惑。但是我都尝试过。另外，使用新的xy网格比使用flex网格更好吗？预先感谢。

Answer 1

您必须添加文档中也提到的容器。网格本身使用可用宽度。

https://foundation.discourse.group/t/global-width-is-not-working-with-foundations-new-xy-grid/2381

您需要.grid-container，请参见https://get.foundation/sites/docs/xy-grid.html#grid-container

请参见https://github.com/foundation/foundation-sites/blob/b58d2354f54bb601f1b4ae7ee8536ac7ccfb18ba/scss/settings/_settings.scss#L859$grid-container: $global-width;