如何在没有折叠展开功能的情况下在移动屏幕中垂直布局导航栏答案

【问题标题】：How to have vertical layout of navbar in mobile screen without collapse expand feature如何在没有折叠展开功能的情况下在移动屏幕中垂直布局导航栏
【发布时间】：2014-06-15 10:53:30
【问题描述】：

编辑：JS Fiddle 链接http://jsfiddle.net/Q4atQ/ 编辑：我现在可以在不可折叠的移动屏幕上获得垂直菜单栏。现在唯一需要弄清楚的就是如何让垂直导航栏占据整个手机屏幕。

我正在构建一个简单的 HTML5 应用程序，它有一个导航栏，它应该在桌面浏览器的页面顶部水平显示，下面有相应的内容。

但是，我希望导航栏在移动浏览器页面上垂直显示并占据全屏，而没有展开折叠功能或三行（汉堡）菜单项。

我使用以下代码作为起点-

<div class="navbar navbar-default">
<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="#">Project name</a>
</div>
<div class="navbar-collapse collapse in">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</div></div>

我可以得到一个扩展的导航栏，但它没有占据整个屏幕并且折叠选项仍然存在。任何帮助，将不胜感激。谢谢

【问题讨论】：

能否请您也添加JS和CSS代码..这样我可以检查解决方案..最好给你的jsfiddle工作副本..
jsfiddle.net/Q4atQ 这是jsfiddle链接，我怎样才能让eh nav菜单占据全屏？

标签： css html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

只使用css，一种方法是：

小提琴：http://jsfiddle.net/Q4atQ/1/

CSS：

html, body, .container-full, .navbar{    
   height:100%;
}

.navbar{
    margin:0px;
}

【讨论】：

【解决方案2】：

这可行：

@media (max-width: 480px) {

.navbar {
  height:100vh;
  margin:0px;
 }
.navbar-nav{
  margin:0px;
 }

}

【讨论】：