如何在不干擾/覆蓋角度材料設計的情況下以角度使用引導網格樣式

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

有一個專門針對 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/

希望這可以幫助！

Answer 3

即使我們對 Bootstrap 的最小包含也增加了一些樣式，這些樣式與開箱即用的 Angular Material 搭配得不是很好。 讓我們使用以下內容創建新的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

Answer 4

你可以在你的styles.scss使用它來本地化組件內部的引導程序

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

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