0
У меня проблема с ответной темой бутстрапа, на панели администратора у меня есть верхняя и левая навигация, все в порядке, но когда я иду в уменьшенное представление, как мобильный, левая панель появляется как вторая верхняя панель (это то, что я хочу, чтобы она делала), но проблема в том, что она перекрывает часть содержимого, потому что у меня есть надстройка на одном баре, поэтому я не хочу удваивать это дополнение, потому что в обычном режиме у меня будет пустое пространство, которое я не хочу.Laravel Bootstrap отзывчивая тема navbar перекрывает контент при уменьшении
Итак, как я могу сделать другую прокладку для нормального просмотра и уменьшенного просмотра.
Вот код:
<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;
}
}
Спасибо.
отправьте свой код или создайте [скрипку] (http://jsfiddle.net/) для вашего вопроса – Raviteja