Bootstrap 3 中的非画布移动菜单问题

Question

我在 Bootstrap 3 中使用 offcanvas 进行导航，当窗口宽度变小时，它在桌面浏览器中运行良好，但是在 iOS 设备上，一旦单击菜单，导航的 offcanvas 部分就不会显示按钮 - 它只是缩进 -80%，正如您所期望的那样 - Safari 和 iOS 版 Chrome 都是这种情况。

它可以在浏览器和 Android 设备上运行，但在 iOS 上不能用于 Safari 和 Chrome（可能是所有浏览器）。我已经尝试过广泛地使用 CSS - 比我在这里尝试列出的变化更多 - 毫无疑问，这个问题是微不足道的。

Answer 1

我现在无法指出缺少的内容，但最近几天我在我正在开发的网站上做到了这一点。由于我的粘性标题，我通过 javascript 将 .navbar-collapse 移动到小屏幕上的正文。 我的 CSS 如下所示：

.navbar-collapse {
    max-height: none;
    height: 100% !important;
    z-index: 1000;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 70%;
    max-width: 400px;
    padding-top: @grid-padding*2;
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    .transition;
    overflow: scroll;
}



 .navbar-collapse.in {
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

还有我的js，像这样

if (windowWidth > 767) {
    if ($("#MainNav-collapse").parent().is("body")) {
        $("#MainNav-collapse").appendTo("#MainNavBar");
    }
}
else {
    $("#MainNav-collapse").appendTo("body");
}