Html Bootstrap 3 导航栏固定顶部固定在移动视图中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18264944/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 navbar-fixed-top stay fixed in mobile view
提问by gema
This may be a bug or just my bad coding. I've built a website using twitter bootstrap 2.3.* and found no problem, especially for the responsive function. The problem came up when I tried to switch into bootstrap 3.RC-2 which was latest stable release (according to Wikipedia). I have also tried with the examples contained in the download, and had the same result when I tried to resize the viewport.
这可能是一个错误或只是我的错误编码。我已经使用 twitter bootstrap 2.3.* 建立了一个网站，并没有发现任何问题，尤其是响应功能。当我尝试切换到 bootstrap 3.RC-2 时出现了问题，这是最新的稳定版本（根据Wikipedia）。我还尝试了下载中包含的示例，并在尝试调整视口大小时得到了相同的结果。
Please have a look at http://bootply.com/69863for the example, and try to resize window browser then click render view, and try to expand menu and scroll the page.
请查看http://bootply.com/69863的示例，并尝试调整窗口浏览器的大小，然后单击渲染视图，并尝试展开菜单并滚动页面。
My real question is how do I make the fixed navbar static when in mobile (collapsible) view?
我真正的问题是如何在移动（可折叠）视图中使固定导航栏保持静态？
回答by Bass Jobsen
.navbar-fixed-topkeeps the navbar fixed top for all screen sizes now. This will be the default. When you take a look at navbar.less you will see no media queries are applied on this class too.
.navbar-fixed-top现在将导航栏固定在所有屏幕尺寸的顶部。这将是默认设置。当您查看 navbar.less 时，您将看到此类也没有应用任何媒体查询。
To make the navbar static after the collapse add the css shown below after the Boostrap CSS:
要在折叠后使导航栏保持静态，请在 Boostrap CSS 之后添加如下所示的 css：
@media (max-width: 767px) /* @grid-float-breakpoint -1 */
{
.navbar-fixed-top
{
position: relative;
top: auto;
}
}
回答by DarkScrolls
Additionally to what Bass Jobsen has mentioned, for a better usability on mobile, the following CSS snippet removes the "sub-scrolling" on the navigation bar and removes the top margin which is there due to the large screen fixed navbar:
除了 Bass Jobsen 所提到的，为了在移动设备上获得更好的可用性，以下 CSS 代码段删除了导航栏上的“子滚动”并删除了由于大屏幕固定导航栏而存在的顶部边距：
@media (max-width: 767px) {
.navbar-fixed-top {
position: relative;
top: auto;
}
.navbar-collapse {
max-height: none;
}
body {
margin: 0;
}
}
回答by Martha
@media (max-width: 767px){
.navbar-fixed-top {
position: relative;
top: auto;/* Auto position navbar top */
}
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
max-height:inherit;/* Clear max-height */
}
body{
padding:0px;/* No padding */
}
}
