Question

这里的布局1（带边栏）

<div class="row">
  <div class="main-content columns small-6>
     {main content}
  </div>
  <div class="columns small-6>
    {sidebar}
  </div>
</div>

这里的布局2（没有侧边栏）

<div class="row">
  <div class="columns small-12">
    {main content}
  </div
</div>

在我的主要内容部分中，我有类似的内容

<ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
  <li>item one</li>
  <li>item two</li>
  <li>item three</li>
</ul>

如果我将主要内容部分添加到布局2，它将按预期工作（在不同的视口中更改）。我希望能够为我的主要内容（块网格）使用相同的代码，但是小，中和大的标志不是基于总屏幕宽度，而是在父节内部可用的宽度

例如，在布局1中，如果我的主要内容列的宽度为450px，我希望我的块网格知道使用＆＃34; small-block-grid-1＆＃34;，无论整个屏幕如何尺寸为900px +（中等尺寸）。

Answer 1

这不是基础媒体查询的工作方式。将根据屏幕宽度调用small，而不是父宽度。嵌套行是相对定位的，正如您所声明的那样，它们从父元素继承它们的宽度。在sass设置文件中，您可以更改此变量：

$block-grid-media-queries: true;

为false，并编写自己的媒体查询

来自Foundation docs：您可以使用block-grid（）mixin中提供的选项进一步自定义块网格：

.your-class-name {
      @include block-grid(
    // This controls how many elements will be on each row of the block grid. Set this to whatever number you need, up to the max allowed in the variable.
    // Available options: 1-12 by default, and false.
    $per-row: 3,

    // This controls how much space is between each item in the block grid.
    // Use a variable or any pixel or em values.
    $spacing: $block-grid-default-spacing,

    // This controls whether or not base styles come through, set to false to leave out.
    $base-style: true
  );
}

在Foundation中使用嵌套行的宽度

1 个答案: