可折叠导航栏问题答案

【问题标题】：Collapsible navigation bar issues可折叠导航栏问题
【发布时间】：2013-01-08 23:41:17
【问题描述】：

我正在尝试创建一个类似于Bootstrap 的导航栏。如果您访问他们的网站并重新调整浏览器的大小。如果你把它重新调整得足够窄，顶部的导航栏就会变成一个按钮。当您单击按钮时，它会将所有内容向下推并再次显示完整的导航。

这就是我试图用这个jsfiddle 来完成的，但它有以下问题：

最初，按钮没有隐藏，它应该是隐藏的，只有在屏幕太窄时才可见。
（已修复）按钮不像 bootstrap 那样显示背景
（已修复）重新调整浏览器大小以使导航消失并单击按钮。然后点击子菜单，子菜单项显示不好。

第 1 期屏幕打印：

导航栏应该还不可见，因为浏览器宽度大于 940 像素

出现导航栏，没关系，因为浏览器宽度小于940px

完整的 html 代码：

<html lang="en">
<head>
    <title></title>

    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet" />


    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {    
        });
    </script>
</head>
<body>
    <div class="conatiner-fluid">
        <div class="row-fluid">
            <div class="span10">

                <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>

                <div class="nav-collapse">
                    <ul class="nav nav-tabs">
                        <li><a href="#">Home</a></li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown"
                                href="#">Help<b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Keep</a></li>
                                <li><a href="#">Screaming</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>

            </div>
        </div>
        <div class="row-fluid">
            <div class="span10">
                other content
            </div>
        </div>
    </div>
</body>
</html>

【问题讨论】：

标签： javascript css twitter-bootstrap

【解决方案1】：

这更接近你所追求的吗？
http://jsfiddle.net/panchroma/R4BEY/

您的示例中有一个 span10 div，我不知道您的目标是什么，所以我在它后面添加了一个 span2 以完成该行。

HTML 如下。您在打开的容器 div 上有一个错字，并且您缺少 navbar 和 navbar-inner div。我认为这就是我所做的改变。

祝你好运

<div class="container-fluid"> 
<div class="row-fluid">
<div class="span10">

<div class="navbar">
<div class="navbar-inner">


<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>

 <div class="nav-collapse collapse ">
    <ul class="nav nav-tabs">
      <li><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Help<b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Keep</a></li>
          <li><a href="#">Screaming</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div> <!-- end nav-collapse -->

 </div><!-- end nav bar inner -->  
 </div> <!-- end nav bar -->

</div><!--end span10 -->
<div class="span2">span 2</div>
</div><!-- end row -->


<div class="row-fluid">
<div class="span10">
  other content
</div>
<div class="span2">span 2</div>
</div>
</div>

【讨论】：

谢谢，但它只修复了问题 #2 和 3，而不是 #1。对于＃1，我喜欢显示链接，并且只有当浏览器窗口变窄时，它才会折叠成一个按钮。我从您的更新中创建了另一个小提琴。 jsfiddle.net/qMdYg/4
默认情况下，Bootstrap 菜单在 940 像素处折叠，这就是我的示例和 Bootstrap 站点上发生的情况。是否要更改此断点？
我包含了屏幕打印来演示问题 1。
Ray，你能再检查一下我的 jsFiddle 吗？除非我遗漏了一些明显的东西，否则我看不到您遇到的问题，所以也许我忘记更新我的版本：jsfiddle.net/panchroma/R4BEY