是否可以仅在移动设备上使用Twitter Bootstraps .navbar-fix-to-top？

Question

我有这个导航栏的Twitter Bootstrap 3网页:

<div class="col-xs-12 col-md-10 col-md-offset-1">
    <nav class="navbar navbar-inverse" role="navigation">
      <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">
          Title
        </a>
      </div>
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        ...
      </div>
    </nav>
</div>

它在桌面上看起来很不错,有一些上边距.但是,是否可以仅在移动设备上使用.navbar-fixed-to-top？那么在移动设备上,导航栏始终位于顶部,没有顶部,左侧和右侧边距？

Answer 1

最简单的方法是仅使用 CSS。不需要javacript。我在 .navbar-default 中使用了来自 navbar.less 的 .navbar-top-fixed 样式。如果您有不同的类名，只需更改它。如果您的导航栏高于 50px，您也应该更改 body margin-top padding。

@media (max-width: 767px) {
    body {
        margin-top: 50px;
    }
    .navbar-default {
        position: fixed;
        z-index: 1030; //this value is from variables.less -> @zindex-navbar-fixed
        right: 0;
        left: 0;   
        border-radius: 0;
        top: 0;
        border-width: 0 0 1px;
    }      
}

Answer 2

您可以使用媒体查询来实现此目的，如下所示：

@media screen and (max-width: 480px)  
{
    nav.navbar
    {
       margin: auto; /*or the margin that you need*/
    }   
}