css - 在 index.html 页面中添加 Bootstrap CDN 导致菜单在 Ionic 中消失

Question

当我在 index.html 中添加 Bootstrap URL 时，我的菜单项往往会消失，可能是它们的颜色发生了变化。

下面是添加 URL 之前 home.html 上的菜单图像:

一旦我在 index.html 中添加这行代码，菜单就会变成空白

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

见下图:

我该如何解决这个问题？

Answer 1

您可能想要使用 bootstrap-saas。我相信某些 Ionic css 类在 bootstrap 中具有相同的名称，这会导致这种冲突。

安装 Bootstrap SASS

版本 3.x

npm install bootstrap-sass --save

版本 4.x

npm install bootstrap@next --save

配置元素

在 src/theme/ 中创建一个空文件 _variables.scss。如果您使用的是 bootstrap-sass(我指的是第 3 版)，请将以下内容添加到 _variables.scss:

$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';

在 src/theme/variables.scss 文件的开头添加以下内容:

版本 3

@import 'variables';
@import '../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

版本 4

@import '../../node_modules/bootstrap/scss/bootstrap';

更多信息我找到了this tutorial关于 bootstrap-sass 的 Angular