twitter-bootstrap Bootstrap 移动菜单 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44568854/
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
Bootstrap Mobile Menu 100%
提问by user979331
I have a very long mobile menu with 4 menu items, each of those items has dropdown menus, the first dropdown is very long and when I'm scrolling through my nav with the first dropdown open, I can't get to the last dropdown in my menu, unless I close the first dropdown, but I would like to be able to get to the last dropdown even if the first dropdown is open.
我有一个很长的移动菜单，有 4 个菜单项，每个菜单项都有下拉菜单，第一个下拉菜单很长，当我在第一个下拉菜单打开的情况下滚动导航时，我无法进入最后一个下拉菜单在我的菜单中，除非我关闭第一个下拉列表，但即使第一个下拉列表打开，我也希望能够进入最后一个下拉列表。
Here is the HTML
这是 HTML
.navbar-collapse {
height: 100vh;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="~/Images/logo.png" class="img-responsive" /></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a>
<div class="dropdown-menu dropdown-communities" role="menu">
<div class="row current-communities">
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
</div>
<hr class="current-communities-hr" />
<div class="row upcoming-communities">
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>I have tried the following:
我尝试了以下方法：
.navbar-collapse {
height: 100vh;
}
But I still can't get to the last dropdown when the first one is open.
但是当第一个打开时我仍然无法进入最后一个下拉列表。
采纳答案by ciammarino
Bootstrap puts absolute positioning on their .dropdown-menu class. Simply position it relatively and you should be golden. See the modification in the snippet.
Bootstrap 将绝对定位放在他们的 .dropdown-menu 类上。简单地将它相对定位，你应该是金色的。请参阅代码段中的修改。
.dropdown-menu{
position:relative;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<style>
.navbar-collapse {
height: calc(100vh - 50px);
}
</style>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="~/Images/logo.png" class="img-responsive" /></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 1</a>
<div class="dropdown-menu dropdown-communities" role="menu">
<div class="row current-communities">
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
</div>
<hr class="current-communities-hr" />
<div class="row upcoming-communities">
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 2</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 3</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 4</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>回答by Abhishek Pandey
First of all navbaris fixed element so you can't scroll it even though it's overflowing in body element.
首先navbar是固定元素，因此即使它在 body 元素中溢出，您也无法滚动它。
Now you are giving height 100vhto .navbar-collapse
现在，你是给高度100vh来.navbar-collapse
let say vh = 300px
让说 vh = 300px
Now .navbar-collapse's height is 300pxbut after expending it navbarheight is 350px(.navbar-header+ .navbar-collapse height) and it will overflow body element which current height is 300px.
现在.navbar-collapse的高度是，300px但是在扩展它之后，navbar高度是350px( .navbar-header+ .navbar-collapse height) 并且它会溢出当前高度是的 body 元素300px。
Now you can only scroll .navbar-collapsenot navbarthat's why forth item is hiding.
现在您只能滚动，这.navbar-collapse不是navbar第四项隐藏的原因。
You need to reduce height of .navbar-collapseby 50px(height of .navbar-header).
你需要降低高度.navbar-collapse通过50px（.navbar头的高度）。
.navbar-collapse {
height: calc(100vh - 50px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<style>
.navbar-collapse {
height: calc(100vh - 50px);
}
</style>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="~/Images/logo.png" class="img-responsive" /></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 1</a>
<div class="dropdown-menu dropdown-communities" role="menu">
<div class="row current-communities">
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
</div>
<hr class="current-communities-hr" />
<div class="row upcoming-communities">
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 2</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 3</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option 4</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>回答by iSR5
Your issue is located in the selector .navbar-collapsewhich has set the max-heightto 340px. To work around it you need to first override that to your desire height and add !Importantto override the existing style.
你的问题是坐落在选择.navbar-collapse已经设定的max-height到340px。要解决它，您需要首先将其覆盖到您想要的高度并添加!Important以覆盖现有样式。
Also, you're using columns inside your menu, so you need to keep in mind that will break some of the bootstrap styling (like dropmenu style for instance). that's because how the selectors has been configured in a hierarchy structure. So, anything out of the bootstrap structure needs to be reconfigured in your favor (This is also applied in most CSS frameworks).
此外，您在菜单中使用了列，因此您需要记住这会破坏一些引导程序样式（例如 dropmenu 样式）。那是因为选择器是如何在层次结构中配置的。因此，引导程序结构之外的任何内容都需要根据您的喜好重新配置（这也适用于大多数 CSS 框架）。
Here is the CodePen
这是CodePen
I have applied
我已经申请
.navbar-collapse {
max-height: 90vh !Important;
height: 90vh;
}
the max-heighthas been overridden with 90% of the vh on any device, that will make sure the menu will not exceed the device height. As you know most of smart devices has built-in tab navigation and the address bar located on top and bottom of the web browser. So, the 10% will take care of that, and make the menu appear correctly.
在max-height已经覆盖的90％的任何设备上的VH的，这将确保该菜单不会超过设备的高度。如您所知，大多数智能设备都有内置的标签导航和位于 Web 浏览器顶部和底部的地址栏。因此，10% 会处理这个问题，并使菜单正确显示。
This code has been tasted on my iPhone 6 and it works just fine.
此代码已在我的 iPhone 6 上试用过，效果很好。
回答by Mixa
You do not need to set the height, but max-height. In bootstran .navbar-collapse max-height: 340px;. For mobile devices, the menu should occupy the entire screen.
您不需要设置height，但需要设置max-height。在 bootstran .navbar-collapse max-height: 340px; 中。对于移动设备，菜单应占据整个屏幕。
<style>
.navbar-collapse {
max-height: calc(100vh - 50px)!important;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<style>
.navbar-collapse {
max-height: calc(100vh - 50px)!important;
}
</style>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="~/Images/logo.png" class="img-responsive" /></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a>
<div class="dropdown-menu dropdown-communities" role="menu">
<div class="row current-communities">
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
</div>
<hr class="current-communities-hr" />
<div class="row upcoming-communities">
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>Option</h4>
<ul>
<li><a href="/Link/">Link</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Option</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
<li><a href="/Link/">Link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>