Question

我已经在我的Angular上完成了基础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，但在下载时检查“浮动网格”，它会让您返回到较旧的网格系统，您的代码应该可以正常工作！

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

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

希望这有帮助！

Answer 2

如果其他人在使用Foundation Flex Grid时遇到问题：
尝试将这些添加到您的 styles.scss 中：（您可以从here中阅读更多内容）

@import "../node_modules/foundation-sites/assets/foundation";

@include foundation-flex-classes;
@include foundation-flex-grid;

如果这行得通，这就是我为Angular 8项目添加基础的方式：

安装基础站点和jQuery：

  $ npm install --save foundation-sites jquery

将它们添加到 angular.json 文件中：

  "styles": [
        "src/styles.scss",
        "node_modules/foundation-sites/dist/css/foundation.min.css"
   ],
   "scripts": [
         "node_modules/jquery/dist/jquery.min.js",
         "node_modules/foundation-sites/dist/js/foundation.min.js"
   ],

app.component.ts

添加 $ 和基础 -

    import { Component } from '@angular/core';
    declare var $: any; // <=========== Add this 

    @Component({
       selector: 'app-root',
       templateUrl: './app.component.html',
       styleUrls: ['./app.component.scss']
    })
    export class AppComponent {
       title = 'app-frontend';
       ngOnInit(): void {
          $(document).foundation(); // <=========== Add this 
       }
    }

Ctrl C 和再次启动或ng服务以重置服务器。

Foudation网格系统无法处理Angular Form

2 个答案: