ios - Bootstrap 3 中 Canvas 外移动菜单的问题

Question

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

它确实适用于浏览器和 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");
}