[英]ng-bootstrap style not importing
Setting up an accordion from here but the style is not importing correctly.从这里设置手风琴,但样式导入不正确。 I expected to see gray boxes like this:
我希望看到这样的灰色框:
GOAL:目标:
However my code looks like this:但是我的代码看起来像这样:
NgbModule.forRoot()
HTML: HTML:
<ngb-accordion #acc="ngbAccordion" activeIds="ngb-panel-0"> <ngb-panel title="Simple"> <ng-template ngbPanelContent> Hi! </ng-template> </ngb-panel> <ngb-panel> <ng-template ngbPanelTitle> <span>★ <b>Fancy</b> title ★</span> </ng-template> <ng-template ngbPanelContent> lolzy </ng-template> </ngb-panel> </ngb-accordion>
The ng-bootstrap
documentation indicates: ng-bootstrap
文档指出:
The only two dependencies are Angular and Bootstrap 4 CSS
仅有的两个依赖项是 Angular 和 Bootstrap 4 CSS
You need to add a reference to Bootstrap 4.xx CSS.您需要添加对 Bootstrap 4.xx CSS 的引用。 This can either be done by adding a CDN
<link>
to your index.html
.这可以通过将 CDN
<link>
添加到您的index.html
来完成。 The following CDN is from the current Boostrap 4.xx documentation :以下 CDN 来自当前的 Boostrap 4.xx 文档:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
Or, if you are using @angular/cli, you can add Global Styles to your angular.json
styles
array property with the relative path from angular.json
to the node_modules/bootstrap/dist/css/bootstrap.min.css
:或者,如果您使用@angular/cli,您可以使用从
angular.json
到node_modules/bootstrap/dist/css/bootstrap.min.css
的相对路径将全局样式添加到您的angular.json
styles
数组属性:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css",
],
You can also use import statements to the node_modules
bootstrap.min.css
in the style.css
file.您还可以对
style.css
文件中的node_modules
bootstrap.min.css
使用 import 语句。
@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
Hopefully that helps!希望这有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.