引导博客修复了侧边栏问题

Bootstrap blog fixed sidebar issue

本文关键字：侧边栏 问题      更新时间：2023-09-26

我试图建立一个博客网站，我最初使用的模板上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/

首先，将侧边栏从专栏中分离出来——在我之前的回答中，我遗漏了这一点:

<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文档，其中有一个右附加导航。
相关文章：