全局宽度不适用于基金会的新 XY 网格

Question

我正在使用最新的 jointsWP，它使用 Foundation 6.5。我之前使用 flex grid 没有任何问题。我想我可以试试新的 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-类。但我都试过了。还有，使用新的 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;

全局宽度不适用于基金会的新 XY 网格

global-width is not working with foundation's new XY Grid

wordpress

sass

zurb-foundation