1

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

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

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

问题 1 屏幕打印：

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

出现导航栏，没关系，因为浏览器宽度小于940px 出现导航栏，没关系，因为浏览器宽度小于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>
4

1 回答 1

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>
于 2013-01-08T00:52:10.350 回答