如何在不干扰/覆盖角度材料设计的情况下以角度使用引导网格样式答案

【问题标题】：how can I use bootstrap grid style in angular without disturbing/overriding angular material design如何在不干扰/覆盖角度材料设计的情况下以角度使用引导网格样式
【发布时间】：2019-07-31 11:43:49
【问题描述】：

如果我使用 ng-bootstrap，grid style 不起作用，但是当我使用 bootstrap（在 style.css 或 angular.json style[] 数组中提供）网格样式时它可以正常工作，但它会覆盖角度材料设计。

ng-bootstrap and bootstrap both I installed from npm

我用<div class="col-md-6 md-offset-3"></div>

【问题讨论】：

Bootstrap 并非设计用于与 Angular Material 结合使用。由于这两个库都提供了相似类型的功能，因此结果可能无法预测，正如您所发现的那样。使用其中之一，而不是两者。

标签： angular angular-material npm-install ng-bootstrap

【解决方案1】：

如果您只需要使用引导网格，您可以添加您的 package.json 依赖项："bootstrap": "4.3.1" 和 npm i 然后在您的styles.scss 添加@import 'bootstrap/dist/css/bootstrap-grid.min.css'; upside 角度材质主题导入，然后您只导入了网格样式而没有所有其他东西，材质主题仍然相同。
@ 987654321@
Here is the source of the unminified file you imported

【讨论】：

我尝试导入@import 'bootstrap/dist/css/bootstrap-grid.min.css';，它工作正常，但它覆盖了material design 。顺便谢谢你的回答。
材料设计中究竟覆盖了什么。我问是因为我这样做了，直到现在，材料设计似乎还可以。唯一不同的是我导入了bootstrap/scss/bootstrap-grid.scss。
像魅力一样工作！

【解决方案2】：

有一个专门针对 Angular 的 bootstrap 材料设计分支应该可以为您解决这个问题。

https://mdbootstrap.com/docs/angular/

我在自己的应用程序中使用它，并且网格系统运行良好。

如果你想通过 npm 安装：https://github.com/mdbootstrap/bootstrap-material-design

mdbootstrap 使用教程：https://mdbootstrap.com/education/bootstrap/corporate-website-lesson-1/

希望这会有所帮助！

【讨论】：

【解决方案3】：

即使是我们对 Bootstrap 的最小化添加也添加了一些样式，这些样式与开箱即用的 Angular 材质搭配得并不好。让我们创建一个新的 styles-reset.scss 文件，内容如下，并在主 styles.scss 文件中的原始 Bootstrap 导入之后将其导入。

* { &:active, :focus { outline: none !important; }} Label { margin-bottom: 0;}

Bootstrap 还设置link color 并在hovered links 上使用underline text-decoration。我们可以通过像这样调整styles-variables.scss文件的内容来删除这些样式，并将其导入style.scss

$link-hover-decoration: none; // 移除按钮链接的下划线

$link-color: #3f51b5; // 根据使用的材质主题设置链接颜色

$link-hover-color: currentColor;

参考来自：https://medium.com/@tomastrajan/how-to-build-responsive-layouts-with-bootstrap-4-and-angular-6-cfbb108d797b

【讨论】：

【解决方案4】：

您可以在 styles.scss 中使用它来本地化组件内部的引导程序

.bootstrapped {
  @import '~bootstrap/dist/css/bootstrap-grid.min.css';
}

<div class="bootstrapped"><div class="container">etc</div></div>

【讨论】：