Bootstrap响应式附加菜单 [英] Bootstrap responsive affixed menu

问题描述

我希望有一个附加的菜单，如引导文档中所示没有贴在手机上，就像在bootstrap doc上一样。
我有以下代码：

I want to have an affixed menu as in the bootstrap doc which is not affixed on mobile phones, just as on the bootstrap doc. I've following code:

<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（）}）。

I have tried it with and without the data-spy="affix" for the ul and I have also tried $(function(){ $('.bs-docs-sidenav').affix() }).

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

But the menu is always fixed so I can't read the text on mobile phones.

推荐答案

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

I just found the answer to my question on the bootstraps doc.css file which they have on their page. You have to add following css (maybe you have to change the class if you are using the affix on a different class)

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

我刚刚添加了班级将添加到 bs-docs-sidenav 元素，并且没有使用任何JavaScript（即 data-spy ）

I also just added the class affix to the bs-docs-sidenav element and didn't use any JavaScript (i.e. the data-spy)

这篇关于Bootstrap响应式附加菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！