我遇到了响应式bootstrap主题的问题，在管理面板中我有一个顶部和一个左侧导航栏，一切都很好但是当我去缩小视图如移动时，左侧栏显示为第二个顶部栏（这是我想要它做的），但问题是它重叠了部分内容，因为我只有一个栏上的填充顶部思考，所以我不想加倍填充因为在普通视图中，我将有一个我不想要的空白区域。
那么如何为普通视图和缩小视图制作不同的填充顶部。
以下是代码：
<body>
<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="{!!URL::to('/')!!}">SCM</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<li><a href="{!!URL::to('/')!!}"><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="{!! url("/user/profile/".Auth::user()->id) !!}">Perfil</a></li>
@if(Auth::user()->type_id == 1)
<li><a href="{!!URL::to('/user')!!}">Administrar</a></li>
@endif
<li role="separator" class="divider"></li>
<li><a href="{!!URL::to('/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 <?php if(isset($section)){echo (($section=="user")?"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 <?php echo ((isset($subsection)&&$subsection=="create")?"class=\"active\"":"");?> href="{!!URL::to('/user/create')!!}"><i class='fa fa-plus fa-fw'></i> Agregar</a>
</li>
<li>
<a <?php echo ((isset($subsection)&&$subsection=="list")?"class=\"active\"":"");?> href="{!!URL::to('/user')!!}"><i class='fa fa-list-ol fa-fw'></i> Mostrar todos los usuarios</a>
</li>
<li>
<a <?php echo ((isset($subsection)&&$subsection=="search")?"class=\"active\"":"");?> data-toggle="modal" data-target="#searchModal_admin" href="#"><i class='glyphicon glyphicon-search fa-fw'></i> Busqueda avanzada</a>
</li>
</ul>
</li>
<li <?php if(isset($section)){echo (($section=="exercise")?"class=\"active\"":"");}?>>
<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 <?php echo ((isset($subsection)&&$subsection=="create")?"class=\"active\"":"");?> href="{!!URL::to('/exercise/create')!!}"><i class='fa fa-plus fa-fw'></i> Agregar</a>
</li>
<li>
<a <?php echo ((isset($subsection)&&$subsection=="list")?"class=\"active\"":"");?> href="{!!URL::to('/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 <?php echo ((isset($subsection)&&$subsection=="create_activity")?"class=\"active\"":"");?>
href="{!!URL::to('/exercise/activity/create')!!}"><i class='fa fa-plus fa-fw'></i> Agregar
</a>
</li>
<li>
<a <?php echo ((isset($subsection)&&$subsection=="list_activity")?"class=\"active\"":"");?>
href="{!!URL::to('/exercise/activity')!!}"><i class='fa fa-list-ol fa-fw'></i> Listar
</a>
</li>
</ul>
</li>
</ul>
</li>
<li <?php if(isset($section)){echo (($section=="config")?"class=\"active\"":"");}?> >
<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 <?php echo ((isset($subsection)&&$subsection=="personal")?"class=\"active\"":"");?>
href="{!!URL::to('/config/personal')!!}"><i class='glyphicon glyphicon-user'></i> Información personal
</a>
</li>
</ul>
</li>
<li <?php if(isset($section)){echo (($section=="mail")?"class=\"active\"":"");}?> >
<a href="{!!URL::to('admin/mail/comunicado')!!}"><i class="glyphicon glyphicon-envelope"></i> Enviar Comunicado</a>
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<div id="page-wrapper">
@yield('content')
</div>
</div>
<!-- /#wrapper -->
</body>
css for this：
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;
}
}
感谢。
答案 0 :(得分：0)
您必须调整最小屏幕尺寸的填充：
例如，
.nav-bar{
padding-top : xxpx;
}
将上述内容放在css上，显然适用于任何屏幕尺寸。
@media(min-width:416px) {
.nav-bar{
padding-top : /*your value*/px;
}
}
以上将确保仅在屏幕尺寸达到416px量后才设置必要的填充级别。
这只是我使用假定的css课程进入iPhone 6屏幕的一个示例，请确保您使用相关CSS课程的值来获取最适合您的内容。