Question

这可能是一个错误或只是我的错误编码。我使用twitter bootstrap 2.3。*建立了一个网站，发现没问题，特别是对于响应功能。当我尝试切换到最新的稳定版本（根据Wikipedia）引导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代码段删除了导航栏上的“子滚动”并删除了由于大屏幕固定导航栏而导致的上边距：< / p>

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

Answer 3

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

    <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"

Answer 4

@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 */
   }
}

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

4 个答案: