在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 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';

有关更多信息，我发现了有关[boot]的this tutorial角靴]

Answer 2

引导程序将Ionic中的默认文本颜色设置为白色。如果您更改背景颜色或覆盖文本颜色，您将看到菜单项