Question

我想在我的twitter boostrap模板中设置一个非常简单的导航栏，它将简单地在移动设备上垂直堆叠菜单项（并在点击时显示孩子）。因为我是Bootstrap的新手（我已经习惯了基础3），所以我使用Bootswatch的Cyborg colorscheme来启动我对这个网站的开发。我在标题中包含了所有可用的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>

Answer 1

要让值折叠，您需要向.nav-collapse添加navbar-inner div，并将其设置为可折叠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>

引导文档的Responsive Section中的更多信息

Twitter Bootstrap：在移动设备上堆叠导航

1 个答案: