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

Bootstrap的材料设计分支专门针对Angular，可以为您解决此问题。

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

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

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

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

希望这会有所帮助！

Answer 2

如果只需要使用引导网格，则可以添加package.json依赖项："bootstrap": "4.3.1"和npm i 然后在您的styles.scss中添加@import 'bootstrap/dist/css/bootstrap-grid.min.css'; 上部，然后导入角度材料主题，然后，您仅导入了网格样式，而没有其他所有内容，并且材质主题仍然相同。 Here is an example on stackblitz

Answer 3

您可以在styles.scss

中使用它来本地化组件内部的引导程序

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

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

Answer 4

即使我们对Bootstrap的最少添加也添加了一些样式，这些样式在开箱即用的Angular Material中效果不佳。让我们创建一个具有以下内容的新styles-reset.scss文件，并在原始Bootstrap导入主styles.scss文件之后将其导入。

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

引导程序还设置link color并在underline text-decoration上使用hovered links。我们可以通过调整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 个答案: