根据屏幕宽度显示和隐藏Bootstrap导航栏的按钮
问题描述:
我使用twitter Bootstrap 3导航栏标题的相当常见的设置。根据屏幕宽度显示和隐藏Bootstrap导航栏的按钮
SETUP:
-
navbar-header
具有2navbars
- 一个
navbar
留下有很多按钮(延伸的navbar-header
高度) - 第二
navbar
是浮动的右侧
浮要求:
- 我想有导航栏头的固定高度,因为我使用的很多按钮的浮动左边的菜单,导航栏头高度扩展
- 我想隐藏浮动左
navbar
额外的按钮,会造成navbar-header
高度 - 扩大本应在
$(window).resize(function() {});
简单地说,当调整窗口大小,额外的按钮应该隐藏和显示基于可用大小工作,使navbar-header
不在高度上展开。
目前我遇到了浮动右键菜单的问题。
的jsfiddle:https://jsfiddle.net/bababalcksheep/wsxa0zae/4/ 尝试调整窗口
var adjustable = function() {
var collection = [];
$('.adjustable-drop').find('> li').removeClass('hide').each(function() {
if (this.offsetTop > 51) {
collection.push(this);
}
});
$(collection).addClass('hide');
};
$(window).resize(function() {
adjustable();
});
$(window).trigger('resize');
答
UPD。我改进了我的解决方案。 (第一个版本是here)
我用
.outerWidth()
和.width()
方法,而不是.offsetTop
。我想你可以从导航栏中删除
<div class="container-fluid"></div>
,因为Navbar被包裹到<div class="container"></div>
。当屏幕宽度为767px或更小时,我们需要显示导航栏的所有元素。
请检查结果:https://jsfiddle.net/glebkema/yt985oxf/
var selectNavbar = $('#navbar');
var selectNavbarHeader = $('.navbar-header');
var adjustable = function() {
if (document.documentElement.clientWidth <= 767) {
$('.adjustable-drop .hide').removeClass('hide');
} else {
var collection = [];
var widthFree = selectNavbar.width() - selectNavbarHeader.outerWidth(true) - selectNavbar.find('.navbar-right').outerWidth(true);
$('.adjustable-drop').find('> li').removeClass('hide').each(function() {
if (widthFree >= $(this).outerWidth(true)) {
widthFree -= $(this).outerWidth(true);
} else {
collection.push(this);
}
});
$(collection).addClass('hide');
}
};
$(window).resize(function() {
adjustable();
});
$(window).trigger('resize');
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav adjustable-drop">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Additional-1</a></li>
<li><a href="#">Additional-2</a></li>
<li><a href="#">Additional-3</a></li>
<li><a href="#">Additional-4</a></li>
<li><a href="#">Additional-5</a></li>
<li><a href="#">Additional-6</a></li>
<li><a href="#">Additional-7</a></li>
<li><a href="#">Additional-8</a></li>
<li><a href="#">Additional-9</a></li>
<li><a href="#">Additional-10</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</nav>
<!-- Main component for a primary marketing message or call to action -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
谢谢。正是我需要的 – django
@django很高兴能够有用。然而,我改进了我的解决方案。请检查一下。 (第一个版本是[这里](https://jsfiddle.net/glebkema/yt985oxf/1/)。) –
我更喜欢改进。 – django