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

发布时间：2020-12-17 17:42:01 所属栏目：安全来源：网络整理

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

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

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

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

要么

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

解决方法

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

首先只为网格(和网格类)编译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 module,它是Normalize.css的扩展. Bootstrap的网格需要重启模块,尤其是box-sizing: border-box设置.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!