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"的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)