我有一个基本的html表和显示数据的基础设施(igx)网格:
<div class="container">
<div class="row">
<div class="col-md-4">
<table> </table>
</div>
<div class="col-md-8">
<igx-grid #grid1 [data]="localData" [autoGenerate]="true"></igx-grid>
</div>
</div>
</div>
我的css文件是:
@import "~igniteui-angular/lib/core/styles/themes/index";
@include igx-theme($default-palette);
table {
width: 100%;
border-collapse: collapse;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
这是package.json中的内容:
"dependencies": {
"@angular/animations": "~8.2.14",
"@angular/common": "~8.2.14",
"@angular/compiler": "~8.2.14",
"@angular/core": "~8.2.14",
"@angular/forms": "~8.2.14",
"@angular/platform-browser": "~8.2.14",
"@angular/platform-browser-dynamic": "~8.2.14",
"@angular/router": "~8.2.14",
"@ng-bootstrap/ng-bootstrap": "^5.1.4",
"@types/hammerjs": "^2.0.36",
"angular-bootstrap-md": "^8.6.0",
"bootstrap": "^4.3.1",
"hammerjs": "^2.0.8",
"igniteui-angular": "^8.2.9",
"jszip": "^3.1.5",
"minireset.css": "~0.0.4",
"resize-observer-polyfill": "^1.5.1",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"web-animations-js": "^2.3.2",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.803.19",
"@angular/cli": "~8.3.19",
"@angular/compiler-cli": "~8.2.14",
"@angular/language-service": "~8.2.14",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "^5.0.0",
"igniteui-cli": "~4.2.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
我的想法是将表和网格放在同一行,但这没有发生。 igx相关的CSS会覆盖它吗? 在开发工具样式中,它主要使用“ core.scss”和“ minireset.css”。 我该如何前进?
答案 0 :(得分:3)
这些软件包或Angular主题的Ignite UI都不应干扰Bootstrap的网格类。 igx-theme
规则专门针对.igx-typography
类下的组件和字体属性。 minireset.css
规则是全局规则,但处理浏览器与基本元素的不一致问题。
除非您的@import
中的styles.scss
版,除非您将它们作为样式添加到angular.json
配置或index.html
页面中,否则请注意,不包括CSS在您正在运行的应用中。看来您可能缺少Bootstrap CSS。
您应该有类似的内容:
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
在您的index.html
示例中,在我的@ng-bootstrap
中看到了。
这似乎很好,请参阅https://angular-8gmxfj.stackblitz.io
Stackblitz:https://stackblitz.com/edit/angular-8gmxfj
PS:您还安装了bootstrap
软件包,所以我想您也可以从那里导入:
@import "~bootstrap/dist/css/bootstrap";
不确定为什么要同时拥有这两个软件包,因为bootstrap
带来了对jquery
和popper.js
的对等依赖,这正是ng-bootstrap
将其替换为Angular使用的原因