【问题标题】：Bootstrap affix not working with bootstrap class引导词缀不适用于引导类
【发布时间】：2015-04-02 14:09:32
【问题描述】：

我对引导程序比较陌生，并尝试使用引导程序词缀设计我的页面。在代码中当我从位于词缀目标 div 内的 col-lg-6 类中删除它时，它工作得非常好，但它不适用于在那里应用给定的引导类。我在删除那个特定的类后尝试过，它工作得很好。

<body id="top" data-spy="scroll" data-target="#header">
  <header id="header" style="background-position: 0% 0px;">
    <a class="image avatar" style="cursor: pointer;">
      <img src="resources/images/Nimesh.jpg" alt=""></a>
    <h1><strong>Ata at Turpis</strong>, cep curae tempus<br> adipiscing erat ultrices laoreet<br> aliquet ac Adipiscing.</h1>

    <ul class="nav nav-tabs nav-stacked" data-spy="affix">
      <li class="active"><a href="#section-1">Section One</a></li>
      <li><a href="#section-2">Section Two</a></li>
      <li><a href="#section-3">Section Three</a></li>
      <li><a href="#section-4">Section Four</a></li>
      <li><a href="#section-5">Section Five</a></li>
    </ul>

  </header>

  <div id="profileImage">

  </div>

  <div id="main">
    <div id="section-1" class="background">
      <div class="col-lg-6">
        <!--content 1a  -->
      </div>
      <div class="col-lg-6">
        <!--content 1a  -->
      </div>
    </div>

    <div id="section-2" class="background">
      <div class="col-lg-6">
        <!--content 2a  -->
      </div>
      <div class="col-lg-6">
        <!--content 2b  -->
      </div>
    </div>

    <div id="section-3" class="background">
      <div class="col-lg-6">
        <!--content 3a  -->
      </div>
      <div class="col-lg-6">
        <!--content 3b  -->
      </div>
    </div>

    <div id="section-4" class="background">
      <div class="col-lg-6">
        <!--content 4a  -->
      </div>
      <div class="col-lg-6">
        <!--content 4b  -->
      </div>
    </div>

    <div id="section-5" class="background">
      <div class="col-lg-6">
        <!--content 5a  -->
      </div>
      <div class="col-lg-6">
        <!--content 5b  -->
      </div>
    </div>
  </div>
</body>

【问题讨论】：

标签： css twitter-bootstrap affix bootstrap-affix

【解决方案1】：

这个问题可以分为两部分：

使用引导网格系统（例如 col-lg-6）
将 Bootstrap Affix 用于您的分节

1。引导网格系统

为了使网格系统正常工作，需要 3 个类：.container、.row、.col-xs-*。

.container: 应该添加到文档的包装中。
.row：当您想设置列时，您必须使用 .row 包装器来包装这些列。
.col-xs-*：您可以在这里设置内容的宽度。

所以你的文档应该是这样的：

<div class="container">
  <div class="row">
    <div class="col-xs-3"></div>
    <div class="col-xs-6"></div>
    <div class="col-xs-3"></div>
  </div>
</div>

网格系统的文档是here。

在您的情况下，您的列似乎没有提供.row 或.container，因此实际布局在某种程度上会被破坏和意外。我认为这可能就是为什么如果您删除那些 col-lg-* 类它可以按您的意愿工作的原因。

2。引导词缀

实际上，Affix 的 official document 非常模糊。基本上，当您向下滚动文档时，<div data-spy="affix"> 元素将从以下状态转变：

在页面加载时将.affix-top 添加到您的间谍元素
每当您滚动到data-offset-top 的值时，它都会删除.affix-top 类并将.affix 类添加到同一元素。
每当您滚动到data-offset-bottom 的值时，它都会删除.affix 类并将.affix-bottom 类添加到同一元素。

如文档所述，您必须为这些类设置 css 规则才能使 affix 插件正常工作。

您必须设置 3 条重要规则： 1..affix-top、.affix、.affix-bottom的宽度 2. 词缀元素固定后的位置 3.将.affix-bottom位置从fixed恢复为absolute

所以你的 css 应该是这样的：

.affix {
  top: 0;
  width: 100%;
}

.affix-top {
  width: 100%;
}

.affix-bottom {
  position: absolute;
  width: 100%;  
}

这是使用词缀的粗略Codepen 示例。我已经复制了您的代码，无论您是否在您的部分中添加col-lg-6，它都有效。您可以调整窗口大小以查看 2 列布局。

需要提一提的是，我不太清楚为什么要将 affix 元素放在标题中，因为在大多数设计案例中，它用于在侧边栏上显示部分标题列表。从某种意义上说，我将它从标题移到主区域，并在网格中设置了一个列。

希望这会有所帮助。

【讨论】：

我的代码也有类似的问题。你是唯一一个指出类名的人，所以我问你这个。我已经使用 javascript 添加了词缀代码。我也添加了css规则。但问题是元素在页面加载时获取affix-top 类，但是当我滚动时，它不会更改为affix 类。它仍然是affix-top 本身。我手动检查和更改类，它按预期工作。有什么解决办法吗？