Bootstrap 3导航栏固定顶部固定在移动视图中

Question

这可能是一个错误或只是我的错误编码.我使用twitter bootstrap 2.3.*建立了一个网站,发现没问题,特别是对于响应功能.当我试图切换到最新稳定版本的引导程序3.RC-2时(根据维基百科),问题出现了.我也尝试了下载中包含的示例,并且在尝试调整视口大小时也得到了相同的结果.

请查看http://bootply.com/69863以获取示例,并尝试调整窗口浏览器的大小,然后单击渲染视图,并尝试展开菜单并滚动页面.

我真正的问题是如何在移动(可折叠)视图中使固定导航栏保持静态？

Answer 1

.navbar-fixed-top现在可以将导航栏固定在所有屏幕尺寸的顶部.这将是默认值.当您查看navbar.less时,您将看到此类上没有应用媒体查询.

要在折叠后使导航栏保持静态,请在Boostrap CSS之后添加下面显示的css:

@media (max-width: 767px) /* @grid-float-breakpoint -1 */
{
    .navbar-fixed-top
    {
    position: relative;
    top: auto;
    }
}

Answer 2

除了Bass Jobsen所提到的,为了在移动设备上获得更好的可用性,以下CSS代码段删除了导航栏上的"子滚动"并删除了由于大屏幕固定导航栏而导致的上边距:

@media (max-width: 767px) {
    .navbar-fixed-top {
        position: relative;
        top: auto;
    }
    .navbar-collapse {
        max-height: none;
    }
    body {
        margin: 0;
    }
}