css - 基础网格不适合

Question

我在使用 Zurb 的 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 个 uls，让中型设备显示 4 个 uls，您需要这样做:

<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>

使用 foundation 时，您不需要任何自定义样式表即可实现此目的。无需编写自定义样式表即可轻松完成此操作是基金会功能的一部分。