Bootstrap 响应式附加菜单

Question

我想要一个像bootstrap doc 那样的附加菜单，它没有附加在手机上，就像在引导文档上一样。 我有以下代码：

<div class="container">
  <div class="row">
    <div class="span3 bs-docs-sidebar ">
      <ul class="nav nav-list bs-docs-sidenav" data-spy="affix">
        <li><a href="#a"><i class="icon-home"></i> A</a></li>
        <li><a href="#b"><i class="icon-chevron-right"></i> B</a></li>
        <li><a href="#c"><i class="icon-chevron-right"></i> C</a></li>
      </ul>
    </div>

    <div class="span9">
      ...
    </div>
  </div>
</div>

我已经尝试过使用和不使用data-spy="affix" 的ul，我也尝试过$(function(){ $('.bs-docs-sidenav').affix() })。

但菜单总是固定的，所以我无法在手机上阅读文字。

Answer 1

我刚刚在他们页面上的 bootstraps doc.css 文件中找到了我的问题的答案。您必须添加以下css（如果您在不同的类上使用词缀，可能需要更改类）

/* Tablet
------------------------- */
@media (max-width: 767px) {
  .bs-docs-sidenav.affix {
    position: static;
    width: auto;
    top: 0;
  }
}

我还刚刚将 affix 类添加到 bs-docs-sidenav 元素中，并且没有使用任何 JavaScript（即 data-spy）