2

我试图在我的 twitter boostrap 模板中有一个非常简单的导航栏，它可以简单地将菜单项垂直堆叠在移动设备上（并在点击时显示子项）。因为我是 Bootstrap 的新手（我已经习惯了 Foundation 3），所以我使用Bootswatch的Cyborg配色方案来启动我对这个网站的开发。我在标题中包含了所有可用的 javascript 插件和 jquery。

到目前为止，我对文档感到非常困惑，非常感谢一些帮助修改当前菜单以在移动设备上正常运行的帮助。谢谢！

<div class="navbar">
  <div class="navbar-inner">
    <ul class="nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</div>
4

1 回答 1

0

要让值折叠，您需要添加一个.nav-collapsedivnavbar-inner并将其设置为针对您的可折叠 div 导航部分。 

<div class="navbar-inner">
<div class="container">
    <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
                    <!--These are to make the button look fancy-->
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </a>

    <div class="nav-collapse collapse">
        <ul class="nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </div>
</div>
</div>

引导文档的响应部分中的更多信息

于 2013-04-17T22:05:50.687 回答