Question

我正在尝试建立一个博客网站，而我最初在getbootstrap.com的示例中使用了该模板。

基本上，我希望右边的侧边栏是固定的，这样当你滚动浏览博客帖子时，侧边栏会保持原样，就像顶部导航一样。

我尝试过使用这个词缀插件，但是在将它保存在同一个地方时遇到了问题。

<div class="col-sm-3 col-sm-offset-1 blog-sidebar" data-spy="affix" data-offset-top="100">

这是一个JSFiddle - http://jsfiddle.net/Sambolina/L3a7q/

Answer 1

首先，在我之前的回答中将你的侧边栏从你的栏目中拆分出来，我错过了：

<div class="col-sm-3 col-sm-offset-1"> 
    <div class="blog-sidebar" data-spy="affix" data-offset-top="130">
        <!---content--->
    </div>
</div>

当您的侧边栏获得课程词缀时，css会从position:relative更新为position:fixed，但一旦修复后，您就不会为侧边栏的位置提供任何CSS。既然您的专栏没有贴上，您需要明确定义顶部定位。为了保持宽度一致，我们还明确定义了粘贴状态和非固定状态：

.blog-sidebar{
    width: 200px;
}

.blog-sidebar.affix{
    top: 40px;
    padding-top: 15px; /*or add it into the top value, I'm just weird*/
    width: 200px;
}

之后唯一的问题是处理崩溃时你将如何处理该列 - 因为它被粘贴后，即使列崩溃后内容也会保留。修复此问题的一个好方法是添加类hidden-xs（如果您从sm更改列中的其他内容）以隐藏此内容，然后创建一个新的div，因为您希望它显示在小视口上并提供它班级visible-xs。你可以独特地设计这个样式，这可能是一个好主意，因为最小设备上的导航栏+导航+内容可能太多了。

有关所有这些的示例，请参阅具有正确附加导航的Bootstrap docs。 （根据作者编辑，以下评论）

Bootstrap博客修复了侧边栏问题

1 个答案: