Question

我正试图在文本右侧获得粘性列的效果，就像在Bootstrap web page中一样。

这是我的代码：

             <nav class="col-sm-4 col-md-4"  data-spy="affix"  data-offset-top="205">
                <div class="panel panel-default" >
                    <div class="panel-heading"><h1>Table des matières</h1></div>
                    <section class="panel-body">
                    <p>
                        Nullam luctus nisi est, id blandit nunc tristique vel! 
                    </p>
                    </section>
                </div>
            </nav>

（左边有另一个栏，占据了前面的8列）

这种作品：当页面加载时，侧边栏显示在正确的位置，当我向上滚动时，它会一直粘在顶部，但是它也跳到左边并坐在最左边一列的顶部，获得的宽度似乎与任何东西都没有多大关系（5列和一点宽）。

查看文档似乎我必须在CSS中自己配置.affix类，以便它保持在正确的位置（这看起来有点奇怪，我只是希望它留在它来自的列中！）。但我应该使用什么价值？我试过把它放在我的CSS中：

.affix {
top: 20px;
left: 62%;
width: 25%;
}

它只是工作（左侧定位和宽度稍微偏离），但当我在不同宽度的浏览器窗口中查看时，它当然无法正常工作。这是否意味着我必须放置所有适当的媒体查询？或者我可以根据列宽等使用一些计算？我有一些非常基本的SASS知识 - 这可能是一种前进的方法，通过在SASS中编译bootstrap来计算这些宽度？

另外，如果有人知道如何在侧边栏中显示你所在的章节（就像在Bootstrap页面上那样），那就太棒了！

Answer 1

看起来您需要将right: 0;添加到CSS中的affix属性中以保持其固定。我继续创建了一个工作模型的CodePen，以便您可以在下面查看。

对于基于位置的链接的设计更改，您需要将scrollspy类添加到ul父级，然后相应地设置a链接的样式。

请注意添加的div和ul类包含li导航元素。

对于响应式设计，您还需要为xs，sm和md设置合适的col宽度。

Bootstrap Affix Right-Side

是否可以使用Bootstrap创建粘性垂直列而无需指定位置？

1 个答案: