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");
}

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

1 个答案: