Jquery 位置固定，布局混乱

预览：

最初，我尝试使用bootstrap的粘贴插件进行切换，但滚动时出现故障：

我一直被困在这个问题上，不知道为什么会把事情搞砸。我想要的只是一个固定的边栏，同时我可以平滑地向下滚动图像

  <div id="sidr" class="sidebar col-xs-2 col-md-3">
        <div class="sidebar-inner-container">
            <div class="logo-container">
                <img src="images/logo.png" alt="" class="logo">
            </div><!-- /.logo-container -->
            <nav class="main-nav">
                <ul class="nav">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="journal.html">Journal</a></li>
                    <li><a href="contact.html">Contact Us</a></li>
                </ul>
            </nav>

            <footer class="main-footer">
                <div class="social">
                    <a class="social-icon icon-facebook" href="#"></a>
                    <a class="social-icon icon-googleplus" href="#"></a>
                    <a class="social-icon icon-behance" href="#"></a>
                    <a class="social-icon icon-rss" href="#"></a>
                </div>
            </footer>
        </div><!-- /.sidebar-inner-container -->
    </div><!-- /.sidebar -->

---

如何解决此问题？

由于您使用的是侧边栏的“位置固定”，因此您需要为主元素留出与侧边栏元素相同宽度的边距：

试试这个CSS：

.main-content{
    margin-left: 400px;
} 

---

请包括您的代码，而不是截图。否则我们只是在猜测发生了什么。这是一个网站的实时版本，而不是截图。定位在哪里？？在以上代码中，请包含完整的代码

.main-content{
    margin-left: 400px;
}