Bootstrap 词缀将元素移动到容器的左侧答案

【问题标题】：Bootstrap affix moves element to left side of containerBootstrap 词缀将元素移动到容器的左侧
【发布时间】：2017-03-12 05:29:13
【问题描述】：

我想要两个附加的侧导航栏，但是当我向下滚动时，我的左侧导航栏会移动到其父 div 的左侧。

我知道问题是词缀将位置更改为固定，因此任何浮动都无关紧要。

我的问题在这应该很清楚

http://www.bootply.com/deaSbNAJ0b - 不介意右侧栏

我相信答案在于 javascript。我的第一个想法是更改 affix 函数以在触发后使用父元素的位置来计算附加元素的位置，但我不知道从哪里开始，javascript 对我来说仍然是新的。

【问题讨论】：

data-spy="affix" data-offset-top="0" 将其从您的<div id="left_side_bar" data-spy="affix" data-offset-top="0" 中删除并查看。
嗯，这将删除词缀，这是重点。我希望左侧导航栏紧贴中心栏并保持固定。

标签： javascript jquery css twitter-bootstrap

【解决方案1】：

基本上这个问题有already been answered here。如文档中所述..

通过数据属性使用词缀插件或手动使用您自己的 JavaScript。在这两种情况下，您都必须为附加内容的位置和宽度。

所以在这种情况下，您必须为附加元素设置特定的宽度。当它变为position:fixed 时，它会从正常的文档流中移除，并且不会保持其正常的基于百分比的“未固定”宽度。

您需要调整最适合其他页面内容的宽度，请记住，position:fixed 无法响应引导列。这里它只应用于大于 991px 的宽度，以便列可以在较小的屏幕上正常堆叠。

@media (min-width: 992px) {
  .affix-top {
    position: static;
    margin-top:10px;
    width:240px;
  }

  .affix {
    position: fixed;
    top: 10px;
    width:240px;
  }
}

http://www.bootply.com/FlGXADz2L3

【讨论】：