如何使流行的引导程序主题的左侧栏表现得像主要内容一样?

请参阅this example.

如您所见,“主要内容”正在滚动,但是左侧边栏和标题都是固定的。我该怎么办,以便左侧边栏与主要内容一起滚动(但仍为全高)?

最佳答案

首先,从顶部导航中删除您的左侧导航。因为,您需要修复顶部导航。如果将您的左侧导航栏放在顶部导航栏,它也会固定,这是您不想要的。
然后将.side-nav fixed的css更改为absolute。下面的例子。


CSS--

@media (min-width: 768px)
    .side-nav {
    position: absolute;/* Changed*/
    top: 51px;
    left: 225px;
    width: 225px;
    margin-left: -225px;
    border: none;
    border-radius: 0;
    overflow-y: auto;
    background-color: #222;
    }

10-08 16:46