带有 class "toolbar-bottom" 的工具栏为页面内容创建了不正确的填充

Question

使用Framework7，我创建了一个工具栏。它非常适合 iOS 主题。但是，当我在 material 主题上测试它时，它位于顶部。我发现一些 Framework7 文档将我指向 "toolbar-bottom" class。但是，page-content 表现得好像工具栏仍在顶部，padding-top 属性不正确。我不想在 Framework7 css.

上硬编码覆盖

这是我的结构：

<div class="page navbar-fixed toolbar-fixed">
  <div class="navbar">...</div>
  <div class="page-content">...</div>
  <div class="toolbar toolbar-bottom">...</div>
</div>

Answer 1

TL;DR 阅读你愚蠢的文档 OP

参见this documentation page。为了使 CSS 正常工作，工具栏必须位于页面内容之前。您的格式应如下所示：

<div class="page navbar-fixed toolbar-fixed">
  <div class="navbar">...</div>
  <div class="toolbar toolbar-bottom">...</div>
  <div class="page-content">...</div>
</div>

带有 class "toolbar-bottom" 的工具栏为页面内容创建了不正确的填充

Toolbar with class "toolbar-bottom" creates incorrect padding for page content

material-design

html-framework-7