Foundation 12 Grid 无法正常工作

Question

我有如下代码：

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<div class="content">
  <div class="row">
    <div class="left-frame large-3 medium-3 hide-for-small columns">
      <header class="icon-bar five-up" role="navigation">
        <a class="item"><i class="fa fa-info-circle"></i></a>
        <a class="item"><i class="fa fa-info-circle"></i></a>
        <a class="item"><i class="fa fa-info-circle"></i></a>
        <a class="item"><i class="fa fa-info-circle"></i></a>
        <a class="item"><i class="fa fa-info-circle"></i></a>
      </header>
      <div class="side-nav">
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
      </div>
      <footer class="pagination-centered">
        <ul class="pagination">
          <li class="arrow unavailable"><a href="#">&laquo;</a></li>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li class="arrow"><a href="#">&raquo;</a></li>
        </ul>
      </footer>
    </div>
    <div class="content large-9 medium-9 small-12 columns">
      <div class="row">
        <div class="large-3 medium-3 small-12 columns">q</div>
        <div class="large-6 medium-6 small-12 columns">q</div>
      </div>
      <div class="row">
        <div class="large-3 medium-3 small-12 columns">q</div>
        <div class="large-6 medium-6 small-12 columns">q</div>
      </div>
    </div>
  </div>
</div>

我想要的是一个页面上 3 到 9 个网格。但是，第二列进入第一列，如下所示：

为什么会这样？肯定是 3 和 9。我想要的是在自己的位置获得第二列。

尝试了其他解决方案

#1：减少第二列

我已经将第二列设置为 8 格，现在它就像一个魅力。奇怪的。不过这样一来，一共就变成了11格。

---

环境

• 基础 5.5.3

Answer 1

使用您的代码在 codePen 示例中测试时效果很好，可能是您的自定义代码有冲突。

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<div class="content">
  <div class="row">
    <div class="left-frame large-3 medium-3 hide-for-small columns">
      <header class="icon-bar five-up" role="navigation">
        <a class="item"><i class="fa fa-info-circle"></i></a>
        <a class="item"><i class="fa fa-info-circle"></i></a>
        <a class="item"><i class="fa fa-info-circle"></i></a>
        <a class="item"><i class="fa fa-info-circle"></i></a>
        <a class="item"><i class="fa fa-info-circle"></i></a>
      </header>
      <div class="side-nav">
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
        <li><a href="#">q</a></li>
      </div>
      <footer class="pagination-centered">
        <ul class="pagination">
          <li class="arrow unavailable"><a href="#">&laquo;</a></li>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li class="arrow"><a href="#">&raquo;</a></li>
        </ul>
      </footer>
    </div>
    <div class="content large-9 medium-9 small-12 columns">
      <div class="row">
        <div class="large-3 medium-3 small-12 columns">q</div>
        <div class="large-6 medium-6 small-12 columns">q</div>
      </div>
      <div class="row">
        <div class="large-3 medium-3 small-12 columns">q</div>
        <div class="large-6 medium-6 small-12 columns">q</div>
      </div>
    </div>
  </div>
</div>

http://codepen.io/shoaibik/pen/KrmdOJ

Answer 2

我相信原因是因为列应该被行包裹，但你有 column>row>column。在您的情况下，您应该使用 .hide-for-small-only 类和 .hide-for-medium-up 来获得您想要的结果。