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

Question

编辑: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>

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

Answer 1

仅使用 css，一种方法是:

fiddle :http://jsfiddle.net/Q4atQ/1/

CSS:

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

.navbar{
    margin:0px;
}