0

我有以下标记：

<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：我希望它看起来像什么

在此处输入图像描述

4

1 回答 1

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

于 2012-10-21T14:14:28.057 回答