Laravel Bootstrap响应式主题导航栏在减少时重叠内容
[英]Laravel Bootstrap responsive theme navbar overlaps content when reducing
问题描述
我在响应式引导主题上遇到了问题，在管理面板中，我有一个顶部和一个左侧导航栏，一切正常，但是当我转到移动设备等缩小视图时，左侧栏成为第二个顶部bar（这是我想要的操作），但问题是它与内容的一部分重叠，因为我只在一个条上有填充顶的想法，所以我不希望将该填充翻倍，因为在正常情况下视图，我将有一个不需要的空白。
因此，如何为普通视图和缩小视图制作不同的填充顶部。
这是代码：
<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：
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;
}
}
谢谢。
1 个解决方案
解决方案1
0 2015-12-01 11:49:52
您必须将填充调整为最小屏幕尺寸：
例如，
.nav-bar{
padding-top : xxpx;
}
将以上内容放在CSS上，显然适用于任何屏幕尺寸。
@media(min-width:416px) {
.nav-bar{
padding-top : /*your value*/px;
}
}
上面的内容可以确保仅在屏幕尺寸达到416px数量之后才设置必要的填充级别。
这只是我在假定的css类的iPhone 6屏幕上获得的一个示例数量，请确保您使用相关css类的值来获得最适合您的内容。
Wordpress自定义主题中的Bootstrap 3响应表代码替换
[英]Bootstrap 3 responsive table code replacement in Wordpress custom theme
Laravel上传图片时如何通过降低质量来减小图片大小？
[英]How to reduce the image size by reducing the quality when uploading images in Laravel?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.