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

Question

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

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

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

OR

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

Answer 1

我认为你只能在一个CSS文件中为网格编译Bootstrap 4的Sass代码。并将此CSS链接到Angular Material2的shouldReceive文件中。

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

src/index.html

您必须将// 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编译为CSS代码。请注意，Bootstrap需要运行postCSS autoprefixer。

编译CSS文件后，您可以将其链接到bootstrap.scss文件中，如下所示：

src/index.html

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

Answer 2

Bootstrap和Material2一起玩得很好（差不多）。我遇到奇怪的填充/边距的问题是因为我试图一起使用grid list组件和Bootstrap网格系统，在我停止使用grid-list并完全切换到Bootstrap for row / column后问题得到了解决布局。然后，我就可以使用其他材料2组件，如md-card等，而不会出现布局问题。

如果使用Bootstrap避免使用material2 grid-list组件，反之亦然可能是个好主意。我不完全确定为什么会出现这个问题，但它发生在我的情况下。

或者，可能值得学习CSS3 Flexbox以获得更强大的布局管理，从而无需使用Bootstrap或grid-list。