html - Bootstrap 固定侧边栏导致主要内容重叠

Question

一般来说，我是 Bootstrap 和 css 的新手。我想要一个具有固定侧边栏、固定顶部导航和滚动主要内容的网站。

导航栏已修复且工作正常。侧边栏和主要内容的布局也很好。当我将侧边栏设置为固定时，问题就来了。主要内容与侧边栏重叠。

我正在使用基本的网格布局:

<div class="container">
    <div class="col-md-3 affix">
       sidebar is here
    </div>
    <div class="col-md-9">
        main content
    </div>
</div>

我曾尝试在主要内容的左侧添加边距以将其推到上方，但是当调整到较小的设备时看起来很糟糕。

在保持响应能力的同时实现固定侧边栏的正确方法是什么？

Answer 1

据我所知，您应该将affix 添加到col-md-3 内的div 中

<div class="container">
<div class="row">
    <div class="col-xs-3"> 
        <div id="myAffix" class="list-group" style="width:150px;">
            <a href="#section1" class="list-group-item">Section1</a>
            <a href="#section2" class="list-group-item">Section1</a>
            <a href="#section3" class="list-group-item">Section1</a>
        </div>
    </div>

    <div class="col-xs-9">
    </div>
</div>