在没有 disturbing/overriding angular material 设计的情况下，如何在 angular 中使用 bootstrap 网格样式

Question

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

ng-bootstrap and bootstrap both I installed from npm

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

Answer 1

有一个 material design for bootstrap 的分支专门针对 Angular 应该可以为您解决这个问题。

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

我在自己的应用程序中使用它，网格系统运行完美。

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

显示 md 用法的教程bootstrap：https://mdbootstrap.com/education/bootstrap/corporate-website-lesson-1/

希望对您有所帮助！

Answer 2

如果您只需要使用 bootstrap 网格，您可以添加 package.json 依赖项："bootstrap": "4.3.1" 和 npm i 然后在你的 styles.scss 添加 @import 'bootstrap/dist/css/bootstrap-grid.min.css'; upside angular material 主题导入然后你就可以了，你只导入了没有所有其他东西的网格样式和 material主题还是一样
Here is an example on stackblitz
Here is the source of the unminified file you imported

Answer 3

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

* { &: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; // 删除按钮的下划线 links

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

$link-hover-color: currentColor;

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

Answer 4

您可以在 styles.scss

中使用它来本地化 bootstrap 内部组件

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

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

在没有 disturbing/overriding angular material 设计的情况下，如何在 angular 中使用 bootstrap 网格样式

how can I use bootstrap grid style in angular without disturbing/overriding angular material design

angular-material

npm-install

ng-bootstrap

angular