我有一个基本的html表和显示数据的infragistics（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”。我该如何前进？
这些软件包或Ignite UI for Angular主题均不应干扰Bootstrap的网格类。igx-theme规则专门针对类的组件和字体属性.igx-typography。minireset.css规则是全球性的，但要处理浏览器与基本元素之间的不一致问题。
请注意，除非@import在您的-ed中styles.scss添加了-ed ，否则将它们作为样式添加到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的原因。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句