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() })，我也试过了{{1}}。

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

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）

Bootstrap响应式附加菜单

1 个答案: