在 Foundation 中使用嵌套行的宽度

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 中，如果我的主要内容栏的宽度为 450 像素，我希望我的块状网格知道使用 "small-block-grid-1"，而不管总屏幕尺寸为 900 像素以上（中等尺寸） ).

Answer 1

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

$block-grid-media-queries: true;

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

来自基金会文档：您可以使用 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 中使用嵌套行的宽度

Use Width of Nested Row in Foundation

css

zurb-foundation