10

这可能是一个错误或只是我的错误编码。我使用 twitter bootstrap 2.3.* 建立了一个网站，并没有发现任何问题，特别是对于响应式功能。当我尝试切换到最新稳定版本的 bootstrap 3.RC-2 时出现了问题（根据Wikipedia）。我还尝试了下载中包含的示例，并且在尝试调整视口大小时得到了相同的结果。

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

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

4

4 回答 4

18

.navbar-fixed-top现在保持所有屏幕尺寸的导航栏固定在顶部。这将是默认设置。当您查看 navbar.less 时，您将看到该类也没有应用任何媒体查询。

要在折叠后使导航栏保持静态，请在 Boostrap CSS 之后添加如下所示的 css：

@media (max-width: 767px) /* @grid-float-breakpoint -1 */
{
    .navbar-fixed-top
    {
    position: relative;
    top: auto;
    }
}
于 2013-08-16T09:13:32.217 回答
15

除了 Bass Jobsen 提到的，为了更好地在移动设备上使用，以下 CSS 片段删除了导航栏上的“子滚动”，并删除了由于大屏幕固定导航栏而存在的上边距：

@media (max-width: 767px) {
    .navbar-fixed-top {
        position: relative;
        top: auto;
    }
    .navbar-collapse {
        max-height: none;
    }
    body {
        margin: 0;
    }
}
于 2013-12-17T15:08:00.700 回答
0

对于响应式和固定导航栏，请使用以下代码：

    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
          <div class="navbar-header">
            
          <button type="button"class="navbar-toggle collapsed" data-toggle="collapse" data-target="ID-name or class_name" aria-expanded="false">
               <span class="sr-only">toggle navigation</span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
               <span class="icon-bar"></span>
              </button>

然后将您的代码包装在此 div 下...

    <div class="collapse navbar-collapse" id="ID name or class name">
    ...
    </div>

注意- *ID 名称或类名称应在两个地方相同

    For id= "# id_name"
    For className  id=".class_name"
于 2020-11-25T17:50:17.560 回答
-3 
@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 */
   }
}
于 2016-06-14T00:29:56.603 回答