css - 基础网格系统不适用于 Angular Form

Question

我已经在我的 Angular 上完成了 foundation 6 的安装，它工作正常，但我意识到网格系统根本不工作。我做了很多调整和转折，但仍然没有运气。任何人都知道为什么会这样。谢谢。

    <div>
    <h3>
        Add A Warehouse
    </h3>
</div>
<form novalidate [formGroup]= "warehouseForm" (ngSubmit)="onSubmitForm()">
  <div class="row">
    <div class="medium-6 columns">
      <label>Warehouse Name
      <span>
        <i class="fa fa-user"></i>
      </span>
        <input type="text" placeholder="Warehouse Name">
      </label>
    </div>
    <div class="medium-6 columns">
      <label>Warehouse Country
      <span>
        <i class="fa fa-user"></i>
      </span>
        <input type="text" placeholder="Warehouse Country">
      </label>
    </div>
  </div>
  <div class="row">
    <div class="medium-6 columns">
      <label>Warehouse Region
      <span>
        <i class="fa fa-user"></i>
      </span>
        <input type="text" placeholder="Warehouse Region">
      </label>
    </div>
    <div class="medium-6 columns">
      <label>Warehouse City
      <span>
        <i class="fa fa-user"></i>
      </span>
        <input type="text" placeholder="Warehouse City">
      </label>
    </div>
  </div>
  <div class="row">
    <div class="medium-6 columns">
      <label>Warehouse Address
      <span>
        <i class="fa fa-user"></i>
      </span>
        <input type="text" placeholder="Warehouse Address">
      </label>
    </div>
    <div class="medium-6 columns">
      <label>Warehouse Street
      <span>
        <i class="fa fa-user"></i>
      </span>
        <input type="text" placeholder="Warehouse Street">
      </label>
    </div>
  </div>
  <div class="row">
    <div class="medium-6 columns end">
      <label>Warehouse Keeper
      <span>
        <i class="fa fa-user"></i>
      </span>
        <input type="text" placeholder="Warehouse Keeper">
      </label>
    </div>
  </div>
  <div>
    <button type="submit" class="success button expanded">Save</button>
  </div>
</form>

这是我的表格，我可以说我的基础工作正常，因为字体和其他东西工作正常。但是网格就是不工作。

在 .angular-cli.json 中

 "index": "index.html",
  "main": "main.ts",
  "polyfills": "polyfills.ts",
  "test": "test.ts",
  "tsconfig": "tsconfig.app.json",
  "testTsconfig": "tsconfig.spec.json",
  "prefix": "app",
  "styles": [
   "../node_modules/foundation-sites/dist/css/foundation.css",
    "../node_modules/font-awesome/css/font-awesome.css",
    "styles.css"
  ],
  "scripts": [
  "../node_modules/foundation-sites/vendor/jquery/dist/jquery.js",
  "../node_modules/foundation-sites/dist/js/foundation.js"
  ],

来自代码检查的图像

Answer 1

我认为问题出在您的基础版本上!

检查您当前安装的 Foundation 使用的网格系统，因为最新版本的 Foundation 在您下载完整包时启用了 XY 网格，这不会调用旧网格的 CSS!

您需要重新下载 Foundation 的自定义版本，但在下载它时选中“ float 网格”，它会让您回到旧的网格系统，您的代码应该可以工作!

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

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

希望这对您有所帮助!