Question

我正在使用Foundation 5，没有我自己的自定义样式。我按顺序链接app.css，modernizr.js，jQuery，Fastclick和foundation.min.js。

我已经按照我的教程中的说明（“Lynda：Up and Running With Foundation”）和Zurb网站上的创建嵌套行的说明，但是有一个问题：行中的最后一个单元格总是跳过一个小的金额，不仅仅是文本流，而是整个页面布局。在移动设备上，这种小的轻推意味着页面可以左右滑动。

Here's a screenshot of what I'm talking about

我的HTML

<div class="row">
    <div class="large-6 columns panel callout">
        <h2>Our Mission</h2>
         ...text...
    </div>
    <div class="large-3 columns">
        <h3>We're Awesome.</h3>
        text
    </div>
    <div class="large-3 columns">
        <h3>Buy From Us!</h3>
        text
    </div>
    <div class="row">
        <div class="large-3 columns">
            <h3>Good Products?</h3>
            text
        </div>
        <div class="large-3 columns">
            <h3>"Licensed"</h3>
            text
        </div>
    </div>
</div>

我做错了什么？我无法在Google或StackOverflow上看到有关此问题的任何信息，我已经仔细检查了代码，我已将其拆解并在代码示例后从头开始重写...我只是不知道我是什么错过。

Answer 1

因此，虽然使用大3列近似正确的输出，但您需要一点点不同的结构。有许多方法可以做，但要记住的是，如果您使用的是网格或嵌套网格，则所有列总共最多可以添加12列。在您的情况下，您有一个嵌套网格，最多可添加6.这将为您提供不一致的输出，除非您打算将列的一部分设为空。在这种情况下，您可以使用.end表示类强制它向左浮动。

这是一组嵌套网格，它们近似于我的想法。

<div class="row">
  <div class="large-6 columns panel callout">
    <h2>Our Mission</h2>
    text
  </div>
  <div class="large-6 columns">
    <div class="row">
      <div class="large-6 columns">
        <h3>We're Awesome.</h3>
        text
      </div>
      <div class="large-6 columns">
        <h3>Buy From Us!</h3>
        text
      </div>
    </div>
    <div class="row">
      <div class="large-6 columns">
        <h3>Good Products?</h3>
        text
      </div>
      <div class="large-6 columns">
        <h3>"Licensed"</h3>
        text
      </div>
    </div>
  </div> 
</div>

嵌套行中的第二项始终会添加额外的边距，从而抛弃布局

1 个答案: