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

是它是

.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 2

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

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

Answer 3

最简单的方法是只使用CSS。不需要javacript。我在.navbar-default中使用navbar.less中的.navbar-top-fixed样式。如果您有不同的类名，只需更改它。如果您的导航栏高于50px，您还应该更改主体边距顶部填充。

@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 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设置回{ {1}}适用于大中型设备等......

为避免这种情况，您可以使用可用的bootstrap position:fixed;变量，这样它可以在小分辨率浏览器中使用，而不仅仅是上面提到的移动设备，这在使用bootstrap时更有意义。即你应该避免检查设备，并尝试坚持使用媒体查询。

env

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

5 个答案: