Twitter Bootstrap - 在折叠时,导航栏选项不会变成显示选项的按钮

Question

我有这个标记:

<div class='navbar'>
            <div class='navbar-inner'>
              <div class='container'>
                <a class='btn btn-navbar' data-target='.nav-collapse' data-toggle='collapse'>
                  <span class='icon-bar'></span>
                  <span class='icon-bar'></span>
                  <span class='icon-bar'></span>
                </a>
                <div class='nav-collapse'>
                  <ul class='nav'>
                    <li class='active'>
                      <a href='#'>Home</a>
                      <a href='#'>Option 2</a>
                      <a href='#'>Option 3</a>
                    </li>
                  </ul>
            </div>
          </div>
        </div>
      </div>

当屏幕已满时,它会呈现正常状态,但是当我折叠屏幕时,它不会显示扩展显示选项的按钮.有没有我做得不对的东西？知道屏幕崩溃后按钮没有显示的原因吗？

谢谢!

Answer 1

正如安德烈斯所说,你需要确保包含bootstrap-responsive.cs.您还需要确保加载bootstrap.js文件,以便单击折叠按钮显示菜单列表.

此外,您应该将每个链接包装在自己的<li>标记中,如下所示:

<ul class='nav'>
  <li class='active'><a href='#'>Home</a></li>    
  <li><a href='#'>Option 2</a></li>
  <li><a href='#'>Option 3</a></li> 
</ul>

否则你会得到一个奇怪的菜单.