Foundation 12 Grid不能正常工作

Question

我的代码如下：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我想要的是页面上的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

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