将Angular Material2与Bootstrap4 css一起用于网格布局

Question

Angular Material2(alpha.7)还没有像bootstrap网格系统那样的响应式网格组件.引导程序中的布局/网格系统允许创建响应式布局(适应屏幕大小而无需处理涉及自定义媒体查询的写入css并计算出断点的像素值),这非常有用.

我注意到material2项目中包含bootstrap css的material2组件的margin/padding问题.例如:md-card组件开始重叠.

有没有办法让这两个图书馆一起玩得很好？

要么

有没有办法在不包含bootstrap css的情况下获得材质2中的响应式布局/网格优势的引导程序？

Answer 1

我认为您可以在单个 CSS 文件中仅编译 Bootstrap 4 的网格 Sass 代码。并将此 CSS 链接到src/index.htmlAngular Material2 文件中。

首先仅编译网格（和网格类）的 CSS 代码。Bootstrap的源代码已经包含一个bootstrap-grid.scss Sass文件。正如它的评论告诉你的那样：

// Bootstrap Grid only
//
// Includes relevant variables and mixins for the regular (non-flexbox) grid
// system, as well as the generated predefined classes (e.g., `.col-4-sm`).

您必须编译bootstrap-grid.scss而不是bootstrap.scss生成 CSS 代码。请注意，Bootstrap 需要运行 postCSS autoprefixer。

编译 CSS 文件后，您可以将其链接到src/index.html文件中，如下所示：

<link href="bootstrap-gridonly.css" rel="stylesheet">

最后，您应该检查 Angular Material2 是否也使用 CSS 重置。Bootstrap 4 附带了一个新的Reboot 模块，它是 Normalize.css 的扩展。Bootstrap 网格需要重新启动模块，尤其是box-sizing: border-box设置。