javascript - Bootstrap 响应式附加菜单

Question

我希望有一个像 bootstrap doc 中那样的附加菜单，它没有贴在手机上，就像在 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"for theul并且我也尝试过$(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）