Twitter bootstrap 调整大小时引导侧栏与内容重叠

我有一个我无法修复的问题，我有一个顶部栏和侧栏，当页面调整大小时，侧栏会转到顶部栏下方的绝对位置，因此它与我的内容重叠

在这里，我给您留下我的css代码：

body{
    padding-top: 50px;
}

/* ADMIN NAVBAR */

body {
    background-color: #f8f8f8;
}

#wrapper {
     width: 100%;
}

#page-wrapper {
    padding: 0 15px;
    min-height: 568px;
    background-color: #fff;
 }

@media(min-width:768px) {
    #page-wrapper {
        position: inherit;
        margin: 0 0 0 250px;
        padding: 0 30px;
        border-left: 1px solid #e7e7e7;
    }
}

.navbar-top-links {
    margin-right: 0;
}

.navbar-top-links li {
    display: inline-block;
}

.navbar-top-links li:last-child {
    margin-right: 15px;
}

.navbar-top-links li a {
    padding: 15px;
    min-height: 50px;
}

.navbar-top-links .dropdown-menu li {
    display: block;
}

.navbar-top-links .dropdown-menu li:last-child {
    margin-right: 0;
}

.navbar-top-links .dropdown-menu li a {
    padding: 3px 20px;
    min-height: 0;
}

.navbar-top-links .dropdown-menu li a div {
     white-space: normal;
}

.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
    width: 310px;
    min-width: 0;
}

.navbar-top-links .dropdown-messages {
    margin-left: 5px;
}

.navbar-top-links .dropdown-tasks {
     margin-left: -59px;
}

.navbar-top-links .dropdown-alerts {
     margin-left: -123px;
}

.navbar-top-links .dropdown-user {
    right: 0;
    left: auto;
}

.sidebar .sidebar-nav.navbar-collapse {
     padding-right: 0;
     padding-left: 0;
 }

.sidebar .sidebar-search {
    padding: 15px;
} 

.sidebar ul li {
    border-bottom: 1px solid #e7e7e7;
}

.sidebar ul li a.active {
    background-color: #eee;
}

.sidebar .arrow {
    float: right;
}

.sidebar .fa.arrow:before {
    content: "\f104";
}

.sidebar .active>a>.fa.arrow:before {
    content: "\f107";
}

.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
    border-bottom: 0!important;
}

.sidebar .nav-second-level li a {
    padding-left: 37px;
}

.sidebar .nav-third-level li a {
    padding-left: 52px;
}

@media(min-width:768px) {
    .sidebar {
        z-index: 1;
        position: absolute;
        width: 250px;
        margin-top: 51px;
    }

    .navbar-top-links .dropdown-messages,
    .navbar-top-links .dropdown-tasks,
    .navbar-top-links .dropdown-alerts {
        margin-left: auto;
    }
}

/*FIN ADMIN NAVBAR*/

以下是html：

<div id="wrapper">

    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="http://localhost:8000">SCM</a>
        </div>
        <!-- /.navbar-header -->

        <ul class="nav navbar-top-links navbar-right">
            <li><a href="http://localhost:8000"><i class="fa fa-home fa-fw"></i></a>
            <!-- /.dropdown -->
            <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user fa-fw"></i><span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://localhost:8000/user/profile/1">Perfil</a></li>
                                                    <li><a href="http://localhost:8000/user">Administrar</a></li>
                                                    <li role="separator" class="divider"></li>
                        <li><a href="http://localhost:8000/logout"><i class="fa fa-sign-out fa-fw"></i>Logout</a></li>
                    </ul>
            </li>
            <!-- /.dropdown -->
        </ul>
        <!-- /.navbar-top-links -->

        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">
                    <li class="active" >
                        <a href="#"><i class="fa fa-users fa-fw"></i> Usuario<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a  href="http://localhost:8000/user/create"><i class='fa fa-plus fa-fw'></i> Agregar</a>
                            </li>
                            <li>
                                <a class="active" href="http://localhost:8000/user"><i class='fa fa-list-ol fa-fw'></i> Mostrar todos los usuarios</a>
                            </li>
                            <li>
                                <a  data-toggle="modal" data-target="#searchModal_admin" href="#"><i class='glyphicon glyphicon-search fa-fw'></i> Busqueda avanzada</a>
                            </li>
                        </ul>
                    </li>
                    <li >
                        <a href="#"><i class="fa fa-tags fa-fw"></i> Ejercicios<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a  href="http://localhost:8000/exercise/create"><i class='fa fa-plus fa-fw'></i> Agregar</a>
                            </li>
                            <li>
                                <a class="active" href="http://localhost:8000/exercise"><i class='fa fa-list-ol fa-fw'></i>Listar</a>
                            </li>
                                <li >
                                <a href="#"><i class="fa fa-certificate"></i> Categoria<span class="fa arrow"></span></a>
                                <ul class="nav nav-third-level"> 
                                    <li>
                                        <a                                                 href="http://localhost:8000/exercise/activity/create"><i class='fa fa-plus fa-fw'></i> Agregar
                                        </a>
                                    </li>
                                    <li>
                                        <a                                                 href="http://localhost:8000/exercise/activity"><i class='fa fa-list-ol fa-fw'></i> Listar
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <!--BLOG-->
                    <li  >
                        <a href="#"><i class="fa fa-newspaper-o fa-fw"></i> Noticias<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a  href="http://localhost:8000/blog/create"><i class='fa fa-plus fa-fw'></i> Añadir Noticia</a>
                            </li>
                            <li>
                                <a class="active" href="http://localhost:8000/blog"><i class='fa fa-list-ol fa-fw'></i> Mostrar todas las noticias</a>
                            </li>
                            <li><a href="#"><i class="fa fa-tag"></i> Tags<span class="fa arrow"></span></a>
                                <ul class="nav nav-third-level"> 
                                    <li>
                                        <a                                                 href="http://localhost:8000/blog/tag/create"><i class='fa fa-plus fa-fw'></i> Agregar
                                        </a>
                                    </li>
                                    <li>
                                        <a                                                 href="http://localhost:8000/blog/tag"><i class='fa fa-list-ol fa-fw'></i> Listar
                                        </a>
                                    </li>
                                </ul>
                        </ul>
                    </li>
                    <!--BLOG-->
                    <li  >
                        <a href="#"><i class="fa fa-cogs  fa-fw"></i> Configuración<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a                                         href="http://localhost:8000/config/personal"><i class='glyphicon glyphicon-user'></i> Información personal
                                </a>
                            </li>
                            <li>
                                <a                                         href="http://localhost:8000/config/theme"><i class='fa fa-pencil fa-fw'></i> Tema
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li  >
                        <a href="http://localhost:8000/admin/mail/comunicado"><i class="glyphicon glyphicon-envelope"></i> Enviar Comunicado</a>
                    </li>
                    <li  >
                        <a href="#"><i class="glyphicon glyphicon-credit-card"></i> Tipos de pago<span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level">
                            <li>
                                <a  href="http://localhost:8000/pagos/nuevo"><i class='fa fa-plus fa-fw'></i> Agregar</a>
                            </li>
                            <li>
                                <a class="active" href="http://localhost:8000/pagos"><i class='fa fa-list-ol fa-fw'></i> Mostrar tipos de pago</a>
                            </li>                                
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- /.sidebar-collapse -->
        </div>
        <!-- /.navbar-static-side -->
    </nav>

    <div id="page-wrapper">

<form method="POST" action="http://localhost:8000/user/search" accept-charset="UTF-8" class="navbar-form-expanded navbar-form navbar-right visible-lg-block visible-md-block visible-xs-block" id="formSimpleSearch_admin"><input name="_token" type="hidden" value="5Nv6nmk6CZ0yAeKNEDZ7KUaN45ewvVV9EqUZSpsc">
    <div class="input-group" id ="divSearch_admin" style="width:100%">
         <input type="search" class="form-control" placeholder="Buscar …" name="name" style="background-color:#efeded;"> 
         <span class="input-group-btn"><button class="btn btn-default" type="submit" style="background-color:#222222"><i class="fa fa-search" style="color:#9d9d9d;"></i>&nbsp;</button></span>
    </div>
</form>
<table class="table table-striped">
    <thead>
        <th>Nombre</th>
        <th>Email</th>
        <th>Telefono</th>
        <th>Tarifa</th>
        <th>Operaciones</th>
    </thead>
            <tbody>
        <td>Alvaro Rubio Garc&iacute;a</td>
        <td>alvarorubio77@gmail.com</td>
        <td>666777887</td>
        <td>Tipo de pago 1</td>
        <td>
            <a href="http://localhost:8000/user/edit/1" class="btn btn-primary">Editar</a>              
        </td>
    </tbody>
        </table>



    </div>

</div>
<!-- /#wrapper -->

切换导航








































































名义
电子邮件
电传
塔里法
歌剧
阿尔瓦罗·卢比奥·加奇和艾库特；A.
alvarorubio77@gmail.com
666777887
提波德帕戈1号

---

谢谢

试试这个。只是在html结构中做了一些小改动。我想这就是你想要的。 你的边栏就像一个可折叠的菜单。为此，我将

替换为

调整了

#页面包装器

中的上边距，使其更加美观

正文{
填充顶部：50px；
}
/*管理导航栏*/
身体{
背景色：#F8；
}
#包装纸{
宽度：100%；
}
#页面包装器{
填充：0 15px；
最小高度：568px；
背景色：#fff；
}
@介质（最小宽度：768px）{
#页面包装器{
职位：继承；
利润率：60像素0.250像素；
填充：0 30px；
左边框：1px实心#e7e7e7；
高度：1px；
}
}
.导航栏顶部链接{
右边距：0；
}
.导航栏顶部链接李{
显示：内联块；
}
.navbar顶部链接李：最后一个孩子{
右边距：15px；
}
.navbar顶部链接li a{
填充：15px；
最小高度：50px；
}
.导航栏顶部链接.下拉菜单li{
显示：块；
}
.navbar顶部链接。下拉菜单li：最后一个孩子{
右边距：0；
}
.导航栏顶部链接.下拉菜单LIA{
填充：3px20px；
最小高度：0；
}
.navbar顶部链接.下拉菜单li a div{
空白：正常；
}
.navbar顶部链接。下拉消息，
.navbar顶部链接。下拉任务，
.导航栏顶部链接.下拉警报{
宽度：310px；
最小宽度：0；
}
.导航栏顶部链接.下拉消息{
左边距：5px；
}
.导航栏顶部链接.下拉任务{
左边距：-59px；
}
.导航栏顶部链接.下拉警报{
左边距：-123px；
}
.导航栏顶部链接.下拉列表