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>

这是我得到的：

更新（澄清）：
当我检查元素时，它们没有行/列类定义，并且它们根本不居中。

我做错了什么？

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

Answer 1

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

基础6网格系统不起作用

1 个答案: