Foundation 6 网格列始终为 100% 宽度

Question

我目前正在从事一个使用 Foundation 6 的项目。我有一个奇怪的问题，我的列垂直堆叠（它们都是屏幕的 100% 宽度）

我使用的非常简单的代码是这样的：

<div class="row">
  <div class="small-2 large-4 columns"><!-- ... --></div>
  <div class="small-4 large-4 columns"><!-- ... --></div>
  <div class="small-6 large-4 columns"><!-- ... --></div>
</div>

这是直接从基金会网站上的基本网格示例中复制过来的。我确定我已正确链接到样式表，因为即使我使用样式表的完整路径，这种情况也会继续发生。

<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">

提前感谢您的帮助！

Answer 1

我无法发表评论，因为我的代表未满 50 岁，但我想说我也遇到了这个问题。从网站上下载了 Foundation 6，我有所有的文件，我还没有动过 app.css 文件。这是我的代码两列的宽度均为 100%。

<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation for Sites</title>
    <link rel="stylesheet" href="css/foundation.min.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>
    <div class ="row " style= "background-color: aqua">
      <div class = "small-6 large-6 columns" style= "background-color: lightblue">content</div>
      <div class = "small-6 large-6 columns">more content</div>
    </div>

    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

Answer 2

这是因为最新版本的 Foundation 启用了 XY 网格，它不会调用 class "small-2 large-4 columns"!

的 CSS

如果您正在使用 SASS，只需将包含的参数设置为 false，但我假设您只是在使用 CSS，所以如果您只是重新下载自定义版本，然后只需检查 'float grid' 它会让你回到旧的网格系统，你的代码应该可以工作！

如果您想了解有关新 XY 网格的更多信息，请点击此处 link：http://foundation.zurb.com/sites/docs/xy-grid.html

这里是 link 下载自定义基础版本： https://foundation.zurb.com/sites/download/

希望对您有所帮助！

Foundation 6 网格列始终为 100% 宽度

Foundation 6 grid columns are always 100% width

html

css

zurb-foundation