Twitter Bootstrap - 导航没有响应？

Question

我有以下标记：

<div class="navbar">
    <div class="navbar-inner">
        <div class="container">
            <ol class="nav">
                <li>
                    <a href="#">One</a>
                </li>
                <li>
                    <a href="#">Two</a>
                </li>
                <li>
                    <a href="#">Three</a>
                </li>
                <li>
                    <a href="#">Four</a>
                </li>
                <li>
                    <a href="#">Five</a>
                </li>
                <li>
                    <a href="#">Six</a>
                </li>
                <li>
                    <a href="#">Seven</a>
                </li>
                <li>
                    <a href="#">Eight</a>
                </li>
                <li>
                    <a href="#">Nine</a>
                </li>
                <li>
                    <a href="#">Ten</a>
                </li>                       
            </ol>
        </div>
    </div>
</div>

这在我的桌面上工作正常，但是一旦我开始调整浏览器大小，菜单项就会开始换行。我希望它变成垂直导航。我做错了吗？

我不想使用JavaScript解决方案，出现按钮的那个，等等。我只想要一个不需要JS的简单CSS解决方案。我以为Bootstrap会为我处理这个问题。

更新1：看起来像什么

更新2：我希望它看起来像什么

Answer 1

您需要确保在页面顶部使用响应式元标记，并针对您尝试执行的任何操作执行任何特定建议。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

我还建议查看Twitter Bootstrap网站的代码本身以获得额外的指导。

请参阅：http://twitter.github.com/bootstrap/scaffolding.html#responsive

<强>更新

还要确保在导航栏上使用数据切换并正确设置类：

<div class="container">

  <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
  <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </a>

  <!-- Be sure to leave the brand out there if you want it shown -->
  <a class="brand" href="#">Project name</a>

  <!-- Everything you want hidden at 940px or less, place within here -->
  <div class="nav-collapse">
    <!-- .nav, .navbar-search, .navbar-form, etc -->
  </div>

</div>

响应式导航栏需要折叠插件和响应式Bootstrap CSS文件。

请参阅：http://twitter.github.com/bootstrap/components.html#navbar