我有以下 JSFiddle 代码
https://jsfiddle.net/mwcf086c/
.navbar-collapse.in,
.navbar-collapse.collapsing {
clear: left;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header pull-right">
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.php">Home</a>
</li>
<li><a href="about.php">Profile</a>
</li>
<li><a href="about.php">About</a>
</li>
<li><a href="contact.php">Contact</a>
</li>
</ul>
</div>
</div>
</div>
[在移动模式下使用 Bootstrap]
我希望当菜单展开时,它覆盖整个页面。
查看以下image .
知道如何实现这一目标吗?
谢谢
最佳答案
添加高度:100vh!重要;到 .navbar-collapse.in、.navbar-collapse.collapsing 类中的 css
.navbar-collapse.in, .navbar-collapse.collapsing {
clear: left;
}
.navbar-collapse.in {
height: 100vh !important;
}
这是一个 fiddle :https://jsfiddle.net/L2fqzswk/1/
关于javascript - Bootstrap - 使菜单扩展到页面高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39603096/