Foundation 12 网格无法正常工作

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

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

Answer 2

使用您的代码在 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

Foundation 12 网格无法正常工作

Foundation 12 Grid Does Not Work Properly

html

css

responsive-design

zurb-foundation

尝试了更多解决方案

#1：减少第二列

环境