[英]maintain sidebar format with bootstrap navbar collapse
当全屏显示时,我设法保持了一种我喜欢的格式。 但是,当屏幕变小时,侧栏会折叠,并且可以通过汉堡包按钮访问,单击该按钮以显示侧栏时,格式会完全更改。 如何维护侧边栏的格式? 这是html:
<div class="container">
<div class="row">
<!--Collapsable navbar-->
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header" >
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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>
<span class="visible-xs navbar-brand">Logo</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-menu-left leftarrow" aria-hidden="true"></span>
</button>
<ul class="nav navbar-nav mylist" style="align-items:center">
<!-- logo-->
<img src="https://s3.amazonaws.com/crowdhoster/uploads/settings/logo_images/000/000/001/original.png?1410418498" width="80" height="30" margin-left="90">
<br>
<br>
<!--User icon to add in profile picture-->
<div class="row" style="align-items:center">
<div class="img-circle usericon" >
<img src="http://i.stack.imgur.com/dolAE.png" class="img-circle img-responsive usericon tint">
<div class="caption">
<label for='picture'>
<img src="http://i.stack.imgur.com/XMojX.png" style="cursor:pointer">
</label>
<form action="demo_form.asp" style='display: none;'>
<input type="file" name="pic" accept=".gif,.jpg,.png,.tif|image/*" id='picture'>
<input type="submit">
</form>
</div>
</div>
</div>
<br>
<br>
<p style="font-size:22px; line-height: 8px">userN</p>
<p style="font-size:14px">emailAddress</p>
<!-- Navbar menu -->
<li><a style="cursor:pointer" go-click="/dashboard">Dashboard</a></li>
<li><a style="cursor:pointer" go-click="/keyholder">People</a></li>
<li><a style="cursor:pointer" go-click="/devices">Devices</a></li>
<li><a style="cursor:pointer" go-click="/about">About</a></li>
<li><a style="cursor:pointer" go-click="/notifications">Notifications</a></li>
<li><a style="cursor:pointer" go-click="/analytics">Analytics</a></li>
</ul>
<a class="nav navbar-nav logout" style="cursor:pointer; align-items:center" go-click="/signout">Log Out</a>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="col-sm-9">
</div>
</div>
</div>
提前谢谢了。 让我知道您是否需要任何CSS,因为该代码块中有一些适用于格式化的类。
CSS:
@media (min-width: 768px) {
.sidebar-nav .navbar .navbar-collapse {
padding-top: 24px;
background-color: #FFFFFF;
border-radius: 16px !important;
max-height: none;
position: absolute;
border-width: thin;
border-style: solid;
border-color: #f44336 !important;
}
.sidebar-nav .navbar ul {
width: 235px;
height: 676px;
color: #f44336;
background-color: #FFFFFF;
font-family: 'Roboto';
font-size: 16px;
text-align: center;
float: none;
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
color: #f44336;
background-color: #FFFFFF;
font-family: 'Roboto';
text-align: center;
font-size: 16px;
padding-bottom: 12px;
}
您在引导CSS中有以下内容:
@media (min-width: 768px){
.navbar-nav>li {
float: left;
}
}
只需将float添加到.nav> li:
.nav>li {
position: relative;
display: block;
float: left;
}
从.nav> li更改类
.nav > li {
position: relative;
display: block;
}
至
.nav > li {
position: relative;
display: inline-block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.