6

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

我注意到在 material2 项目中包含 bootstrap css 时 material2 组件的边距/填充问题。例如：md-card组件开始重叠。

有没有办法让这两个库一起玩得很好？

或者

有没有办法在不包括引导 css 的情况下在 material2 中获得像响应式布局/网格一样的引导？

4

2 回答 2

4

Bootstrap 和 Material2 可以很好地配合（几乎）。我遇到奇怪的填充/边距的问题是因为我试图一起使用网格列表组件和引导网格系统，并且在我停止使用网格列表并完全切换到引导行/列布局后问题得到解决。然后，我就可以使用其他 material2 组件，如 md-card 等，而不会出现布局问题。

如果使用Bootstrap避免使用 material2grid-list组件，反之亦然可能是一个好主意。我不完全确定为什么会发生这个问题，但它发生在我的案例中。

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

于 2016-10-07T07:10:51.317 回答
3

我认为您只能在单个 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 自动前缀。

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

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

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

于 2016-09-03T19:41:11.760 回答