twitter-bootstrap 是否可以仅在移动设备上使用 Twitter Bootstraps .navbar-fix-to-top？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21465618/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to use Twitter Bootstraps .navbar-fix-to-top only on mobile devices?
提问by sghgw
I have Twitter Bootstrap 3 webpage with this navbar:
我有一个带有这个导航栏的 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>
It looks good on desktop with some top margin. But is it possible to use the .navbar-fixed-to-top only on mobile devices? So that on a mobile device the navbar is always on top without top, left and right margin?
它在桌面上看起来不错，有一些上边距。但是是否可以仅在移动设备上使用 .navbar-fixed-to-top ？那么在移动设备上导航栏总是在顶部，没有顶部，左侧和右侧边距？
采纳答案by Juan
you can use a media query for that, something like this:
您可以为此使用媒体查询，如下所示：
@media screen and (max-width: 480px)
{
nav.navbar
{
margin: auto; /*or the margin that you need*/
}
}
回答by Florin
YESit is
YES是
.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
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
回答by Valeriu Ciuca
The simplest way is using only CSS. No javacript required. I used the styles for .navbar-top-fixed from the navbar.less, inside the .navbar-default. If you have a different classname just change it. If your navbar is heigher than 50px you should change the body margin-top padding also.
最简单的方法是仅使用 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;
}
}
回答by Elon Zito
I would do it this way, using jQuery - detect the User Agent and add the fixed class if necessary.
我会这样做，使用 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>
Source: What is the best way to detect a mobile device in jQuery?
回答by blamb
I like the idea of putting it in jQuery better, as mentioned by Elon Zito, so that you don't have to add a cryptic override for the larger devices when following the correct pattern. e.g. if you add navbar-fixed-topto the base template, then you need to set the navbar-fixed-topto position:relativefor xsand up devices, then set navbar-fixed-topback to position:fixed;for medium and large devices, etc...
我喜欢将它更好地放入 jQuery 的想法，正如 Elon Zito 所提到的，这样你就不必在遵循正确的模式时为较大的设备添加神秘的覆盖。例如，如果您添加navbar-fixed-top到基本模板，那么您需要将 to 设置navbar-fixed-top为position:relativeforxs和 up 设备，然后设置navbar-fixed-top回position:fixed;为中型和大型设备等...
To avoid this, you can use the bootstrap envvariable that is available, this way it will work in small resolution browsers, and not just mobile devices as mentioned above, which makes more sense when using bootstrap. i.e. you should avoid checking for device, and try to stick with media queries instead.
为了避免这种情况，您可以使用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
}
};
}
