引導 - 使菜單擴展到頁面的高度

Question

，我有以下的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>

[使用引導和移動模式]

當菜單被擴展時，我希望它覆蓋所有頁面即

請參閱以下image。

有關如何實現這一點的任何想法？

謝謝

Answer 1

添加高度：100vh！important;在.navbar-collapse.in你的CSS，.navbar-collapse.collapsing類

.navbar-collapse.in, .navbar-collapse.collapsing { 
    clear: left; 
} 
.navbar-collapse.in { 
    height: 100vh !important; 
} 

這裏是一個小提琴：https://jsfiddle.net/L2fqzswk/1/