Question

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

这就是我想用jsfiddle完成的事情，但它有以下几个问题：

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

问题1屏幕打印：

导航栏应该不可见 nav bar should not be visible yet because browser width is larger than 940px

导航栏，这很好，因为浏览器宽度小于940px nav bar appears, it's fine because browser width is less than 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>

Answer 1

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

你的示例中有一个span10 div，我不知道你在哪里，所以我在它之后加了一个span2来完成这行。

HTML如下。你的开放容器div上有一个拼写错误，你错过了导航栏和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>

可折叠导航栏问题

1 个答案: