基础网格不适合

Question

在使用 Zurb's Foundation 时，我的网格出现了问题。我的计划：在小型设备上显示两个相邻的 ul 元素（每个 6 列），在中上，我希望所有四个元素在一行中。 我的 HTML：

<footer>
  <div class="row">
    <ul>
      <li>Headline</li>
      <li>Link</li>
    </ul>
    <ul>
      <li>Headline</li>
      <li>Link</li>
    </ul>
    <ul>
      <li>Headline</li>
      <li><a href="#">Link</a></li>
    </ul>
    <ul>
      <li>Headline</li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</footer>

我正在为我的样式表使用 Sass，文件如下所示：

footer {
  // bg-images and stuff

  .row {
    position: relative; 
    z-index: 2; 
  }
  ul {

    @include grid-column(6);

    li {

        list-style: none;
    }
    @media #{$medium-up} {
        @include grid-column(3);
    }
  }
}

问题来了：在小型设备上，每个 ul 都在自己的行中，在中型设备上，连续三个，第四个是下一个。 有什么建议，我哪里出错了？

非常感谢！ 弗洛里安

编辑：输出的 CSS：

@media only screen and (min-width:40.063em) {
  footer ul {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
    width: 25%;
    float: left; }}

还有这个：

*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 

Answer 1

在基础中使用网格时，您必须指定列 div：

在您的示例中，要让小型设备显示 2 个 ul，让中型设备显示 4 个 ul，您需要这样做：

<footer>
  <div class="row">
    <div class="small-6 medium-3 columns">
    <ul>
      <li>Headline</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
    </ul>
    </div>
    <div class="small-6 medium-3 columns">
    <ul>
      <li>Headline</li>
      <li>Link</li>
      <li>Link</li>
      <li>Link</li>
    </ul>
    </div>
    <div class="small-6 medium-3 columns">
    <ul>
      <li>Headline</li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
    </div>
    <div class="small-6 medium-3 columns">
    <ul>
      <li>Headline</li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
    </div>
    <div class="small-6">
  </div>
  <div class="row">
    <div class="footer-sec">
        <p>&copy; my site | and so on</a></p>
    </div>
  </div>
</footer>

在使用基础时，您应该不需要任何自定义样式表来实现这一点。无需编写自定义样式表即可轻松完成这项工作，这是基金会功能的一部分。