Bootstrap 简单侧边栏 - 下面的内容重叠

Question

我正在使用边栏模板 (https://startbootstrap.com/template-overviews/simple-sidebar/)，我想要边栏下方的一些内容和边栏右侧的内容。它工作正常，但是当我调整 window 大小时，下面的内容重叠并一直到顶部。

我得到了这样的东西：

<div id="wrapper">

    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class="sidebar-brand">
                <a href="#">
                    Start Bootstrap
                </a>
            </li>
        </ul>
    </div>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <h1>Simple Sidebar</h1>
                    <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
                    <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>
                    <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
                </div>
            </div>
        </div>
    </div>
    <!-- /#page-content-wrapper -->

</div>

<!-- /#wrapper -->
<div id="content-below">

</div>

我应该把 "content-below" 容器放在哪里，以防止它在调整大小后一直到顶部？

Answer 1

只需注释掉 css 中的以下部分：

#page-content-wrapper {
    width: 100%;
    /* position: absolute; */
    padding: 15px;
}

请在此处查看示例 codepen

享受.. :)

Bootstrap 简单侧边栏 - 下面的内容重叠

Bootstrap SImple Sidebar - Content below overlaps

html

css

sidebar

twitter-bootstrap

twitter-bootstrap-3