Php Laravel Bootstrap响应主题导航栏在减少
我对响应引导主题有一个问题，在管理面板中，我有一个顶部和一个左侧导航栏，一切正常，但当我转到缩小视图（如mobile）时，左侧栏显示为第二个顶部栏（这是我希望它做的），但问题是它与部分内容重叠，因为我只在一个条上有一个填充顶部，所以我不想将填充加倍，因为在正常视图中，我会有一个我不想要的空白区域 那么，我如何为普通视图和缩小视图制作不同的填充顶部呢 代码如下：Php Laravel Bootstrap响应主题导航栏在减少,php,css,twitter-bootstrap,laravel,twitter-bootstrap-3,Php,Css,Twitter Bootstrap,Laravel,Twitter Bootstrap 3,我对响应引导主题有一个问题，在管理面板中，我有一个顶部和一个左侧导航栏，一切正常，但当我转到缩小视图（如mobile）时，左侧栏显示为第二个顶部栏（这是我希望它做的），但问题是它与部分内容重叠，因为我只在一个条上有一个填充顶部，所以我不想将填充加倍，因为在正常视图中，我会有一个我不想要的空白区域 那么，我如何为普通视图和缩小视图制作不同的填充顶部呢 代码如下： <body> <div id="wrapper"> <!-- Navigation -->
<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>
谢谢。您必须将填充调整为最小屏幕尺寸： 比如说,
.nav-bar{
padding-top : xxpx;
}
@media(min-width:416px) {
.nav-bar{
padding-top : /*your value*/px;
}
}
这只是我在iPhone 6屏幕上看到的一个假设css类的示例，请确保您使用相关css类的值来获得最适合您的内容。请发布您的代码或为您的问题创建一个
@media(min-width:416px) {
.nav-bar{
padding-top : /*your value*/px;
}
}