Twitter 引导导航答案

【问题标题】：Twitter Bootstrap NavigationTwitter 引导导航
【发布时间】：2014-02-02 20:16:39
【问题描述】：

我只是为引导程序构建一个导航，它将获得特殊的样式。桌面客户端获得不同的样式（选项卡）。

这是我正在使用的结构：

    <nav class="navbar navbar-default hidden-lg hidden-md" role="navigation">
        <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                Navigation Title
            </a>
        </div>
        <!-- Collect the nav links for toggling -->
        <div class="collapse navbar-collapse" id="navigationcontent">
            <ul class="nav navbar-nav">
                <li>
                    <a href="link1">
                        Entry 1
                    </a>
                </li>
                <li>
                    <a href="link2">
                        Entry 2
                    </a>
                </li>
            </ul>
        </div>
    </nav>

导航有效，但响应式设计无效（折叠为下拉导航）

我错过了什么？

【问题讨论】：

标签： html twitter-bootstrap navigation twitter-bootstrap-3

【解决方案1】：

将 ID navigationcontent 更改为 bs-example-navbar-collapse-1，反之亦然

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

您必须确保data-target 应该使用关联navbar-collapse div 的有效id 或类名

button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

Js Fiddle Demo

【讨论】：

修复了它。另一个错误是在使用的 php-less 库中删除了一些样式定义，因此根本不显示样式。用另一个 php-less 实现和对 bootstrap 3.1 的更新修复了这个问题。感谢您的帮助

【解决方案2】：

您没有drop-down nav 所定位的navigation menu。在此处查看目标：data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"

你需要这个：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
</div>

参考here。

【讨论】：