android - Cordova 基于平台覆盖 css

Question

我使用 Bootstrap 和最新版本的 Cordova 来构建适用于 Android 和 Windows Phone 8 的应用程序。

我为我的主要顶级 View 定义了一个 Bootstrap navbar-fixed-bottom div。

在 Android 设备上，导航栏将覆盖窗口底部附近的内容。要解决这个问题，我需要指定一个 css 样式:

body {
    padding-bottom: 70px;
}

在 .css 文件中。

在 Windows Phone 8 上，导航栏似乎悬浮在页面上方 70 像素处。

按照 Cordova 文档中推荐的指南，我将一个 overrides.css 文件添加到两个平台的顶级“merges”文件夹中。 android的和上面一样，但是wp8文件指定了0px的padding-bottom。我还将 overrides.css 的空白副本添加到我的顶级/www 文件夹中。这种应用于正文的样式仅在 overrides.css 中定义。

然后我将 overrides.css 加载到我的主 index.html 文件中。

在我的 android 设备上加载代码时，“merges/android”目录中的 body 样式似乎没有得到应用。导航栏返回覆盖我页面的一部分，并且不允许我进一步向下滚动。

在 wp8 上它仍然漂浮在页面底部之上。

我尝试在 main.css 文件之前和之后加载 overrides.css。我还确保 main.css 中的任何内容都不会覆盖 body 属性。我还从我的顶级/www 文件夹中删除了空白的 overrides.css 文件。

似乎只有将 body css 放在顶级/www overrides.css 文档中，我才能让它工作。这不是我想要的，因为它应该被替换。

什么可能会阻止正确应用平台特定的主体样式？

Answer 1

如果您不想处理 CLI 合并功能，@thatrohit 的建议也适用，但我发现了解决该问题的方法。

事实证明，由 Cordova CLI 创建的合并文件夹必须与“/www”根文件夹下的所有内容具有相同的文件夹结构。

我试图覆盖的 .css 文件位于“/www/css”。

在 merges 文件夹中，我丢失了“/css”子文件夹并且有类似“merges/Android/overrides.css”的东西，而它应该是“merges/Android/css/overrides.css”。