在bootstrap中创建响应式导航栏?

时间:2013-08-19 09:01:19

标签: jquery css twitter-bootstrap

有没有办法在没有崩溃的情况下做出响应?我不想使用折叠,因为它隐藏了一个按钮中的所有菜单。我想保留一些不受屏幕解决方案影响的列表。

对不起我的解释。我想要的是在下拉列表中隐藏一些列表,但保留一些。例如,请访问www.plus.google.com

1 个答案:

答案 0 :(得分:2)

是的。我们来看一下基本的导航栏示例:

<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="#" class="brand">Project name</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

通过删除您不需要的<button ... ./>来修改它。您应该做的另一件事是删除nav-collapse collapse类。最后:

<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">

          <a href="#" class="brand">Project name</a>
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
        </div>
      </div>
    </div>