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

Question

如果我使用 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>

Answer 1

如果你只需要使用引导电网，您可以在添加package.json依赖关系："bootstrap": "4.3.1"和npm i 则在您styles.scss添加@import 'bootstrap/dist/css/bootstrap-grid.min.css'; 上攻角材料主题导入和你去那里，你仅进口的网格样式没有其他东西和材料的主题仍然是相同的.
这是stackblitz上的一个例子
这是你导入的未缩小文件的来源

Answer 2

即使我们对 Bootstrap 的最小包含也添加了几种样式，这些样式与开箱即用的 Angular Material 不能很好地配合。让\xe2\x80\x99s 创建styles-reset.scss包含以下内容的新文件，并在主styles.scss文件中导入原始 Bootstrap 后导入它。

\n\n

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

\n\n

Bootstraplink color还在.underline text-decoration​ hovered links我们可以通过像这样调整文件内容来删除这些样式styles-variables.scss并将其导入到style.scss

\n\n

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

\n\n

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

\n\n

$link-hover-color: currentColor;

\n\n

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

\n