Foundation 6 网格系统不工作

Question

这是我的html，我使用的是SCSS版本：

<!doctype html>
<html class="no-js" lang="en" dir="rtl">

<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>Title here</title>
  <link rel="stylesheet" href="css/app.css">
</head>

<body>
  <div class="row">
    <div class="small-3 small-centered columns">3 centered</div>
  </div>
  <div class="row">
    <div class="small-6 large-centered columns">6 centered</div>
  </div>
  <div class="row">
    <div class="small-9 small-centered large-uncentered columns">9 centered</div>
  </div>
  <div class="row">
    <div class="small-11 small-centered columns">11 centered</div>
  </div>
  <script src="bower_components/jquery/dist/jquery.js"></script>
  <script src="bower_components/what-input/dist/what-input.js"></script>
  <script src="bower_components/foundation-sites/dist/js/foundation.js"></script>
  <script src="js/app.js"></script>
</body>

</html>

这是我得到的：

更新（澄清）：
当我检查这些元素时，它们没有 row/column class 定义，而且它们 根本没有居中。

我做错了什么？

注意：我使用的是rtl设置。我检查了它是否损坏了东西，但它仍然没有用。

Answer 1

你的 app.scss 上有 @include foundation-float-classes 或 @include foundation-flex-grid 吗？也许你只使用 @include foundation-xy-grid-classes，那里不再有 .row 和 .columns，只有 .grid-x 和 .cell

Foundation 6 网格系统不工作

Foundation 6 Grid System Doesn't Work

css

zurb-foundation

zurb-foundation-6