Question

我目前正在开展一个项目，我使用的是基础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

这是因为最新版本的Foundation启用了他们的XY网格，它不会调用类“小2大4列”的CSS！

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

如果您想了解有关新XY网格的更多信息，请注意以下链接：http://foundation.zurb.com/sites/docs/xy-grid.html

以下是下载自定义基础版本的链接： https://foundation.zurb.com/sites/download/

希望这有帮助！

Answer 2

我无法评论，因为我的代表不到50岁，但我想说我也有这个问题。从网站下载的基金会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>

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

2 个答案: