是否可以仅在移动设备上使用 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

是的是的

.visible-xs     Visible     Hidden  Hidden  Hidden
.visible-sm     Hidden  Visible     Hidden  Hidden
.visible-md     Hidden  Hidden  Visible     Hidden
.visible-lg     Hidden  Hidden  Hidden  Visible
.hidden-xs  Hidden  Visible     Visible     Visible
.hidden-sm  Visible     Hidden  Visible     Visible
.hidden-md  Visible     Visible     Hidden  Visible
.hidden-lg  Visible     Visible     Visible

http://getbootstrap.com/css/#responsive-utilities

Class prefix    .col-xs-    .col-sm-    .col-md-    .col-lg-
# of columns    12
Column width    Auto    60px    78px    95px

Answer 3

您可以为此使用媒体查询，如下所示：

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

Answer 4

我会这样做，使用 jQuery - 检测用户代理并在必要时添加固定类。

<script>
$(document).ready(function() {

// Create string to check for mobile device User Agent String
$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

// If we detect that string, we will add the fixed class to our .navbar-header with jQuery
if ($.browser.device) {
   $('.navbar-header').addClass('navbar-fixed-to-top');
}
});
<script>

来源：What is the best way to detect a mobile device in jQuery?

Answer 5

我喜欢把它更好地放在 jQuery 中的想法，正如 Elon Zito 所提到的，这样在遵循正确的模式时，您不必为更大的设备添加神秘的覆盖。例如如果将navbar-fixed-top添加到基本模板，则需要将navbar-fixed-top设置为position:relative用于xs及以上设备，然后将navbar-fixed-top设置回position:fixed;用于中型和大型设备等。 ..

为避免这种情况，您可以使用可用的引导程序env 变量，这样它就可以在小分辨率浏览器中工作，而不仅仅是上面提到的移动设备，这在使用引导程序时更有意义。也就是说，您应该避免检查设备，而是尝试坚持使用媒体查询。

$(document).ready(function () {    
    var bsEnv = findBootstrapEnvironment();    
    if(bsEnv != 'lg') {
        $('#navbar').addClass('navbar-fixed-top');
     }
});

function findBootstrapEnvironment() {    
    var envs = ['xs', 'sm', 'md', 'lg'];
    $el = $('<div>');
    $el.appendTo($('body'));

    for (var i = envs.length - 1; i >= 0; i--) {
        var env = envs[i];

        $el.addClass('hidden-'+env);
        if ($el.is(':hidden')) {
            $el.remove();
            return env
        }
    };
}