Question

使用Zurb的基金会时，我的网格出了问题。我的计划：在小型设备上显示两个彼此相邻的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 Grid不适合

1 个答案: