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

我有一个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？因此，在移动设备上，导航栏始终位于顶部，没有顶部、左侧和右侧边距？

是的

.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

---

您可以使用媒体查询进行此操作，例如：

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

---

我会这样做，使用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>

$（文档）.ready（函数（）{
//创建字符串以检查移动设备用户代理字符串
$.browser.device=（/android | webos | iphone | ipad | ipod | blackberry | iemobile | opera mini/i.test（navigator.userAgent.toLowerCase（））；
//如果检测到该字符串，我们将使用jQuery将固定类添加到.navbar头中
如果（$.browser.device）{
$（'.navbar header'）.addClass（'navbar-fixed-to-top'）；
}
});

---

来源：

我喜欢将它更好地放在jQuery中的想法，正如Elon Zito所提到的，这样当遵循正确的模式时，就不必为较大的设备添加神秘的覆盖。e、 g.如果将

navbar固定顶部

添加到基础模板，则需要将

navbar固定顶部

设置为

xs

及以上设备的

position:relative

，然后将

navbar固定顶部

设置回

位置：fixed适用于中型和大型设备等

为了避免这种情况，您可以使用可用的bootstrap
env
变量，这样它将在小分辨率浏览器中工作，而不仅仅是上面提到的移动设备，这在使用bootstrap时更有意义。i、 e.您应该避免检查设备，并尝试坚持使用媒体查询

$(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
        }
    };
}

$（文档）.ready（函数（）{
var bsEnv=findBootstrapEnvironment（）；
如果（bsEnv！=“lg”）{
$（'#navbar'）.addClass（'navbar-fixed-top'）；
}
});
函数findBootTrapenEnvironment（）{
var envs=['xs'，'sm'，'md'，'lg']；
$el=$（''）；
$el.appendTo（$（'body'））；
对于（变量i=envs.length-1；i>=0；i--）{
var env=envs[i]；
$el.addClass（'hidden-'+env）；
如果（$el.is（'：hidden'））{
$el.remove（）；
返回环境
}
};
}
最简单的方法是只使用CSS。不需要JavaScript。我使用了.navbar top的样式，该样式是从.navbar默认值内的navbar.less中修复的。如果您有不同的类名，只需更改它。如果导航栏高于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;
    }      
}

将浏览器窗口缩小到一个小视口。当你变得足够小时，界面将呈现与移动设备相同的效果。谢谢，这很有帮助，因为我正在尝试将导航栏仅固定在大屏幕上，这提醒我，我可以使用这些类创建一些逻辑，并且只有两个单独的导航栏，一个固定，一个不固定，而无需使用媒体查询。我不想在此实例中使用媒体查询的原因是，我使用的是navbar fixed top的引导默认样式，不想覆盖此样式（不需要时不喜欢编辑core）。我知道这是一个可行的答案。你是如何在大屏幕设备上实现这一点的<代码>导航栏固定顶部

仅在浏览器窗口仅打开50%时应用于我的导航栏

@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;
    }      
}