您好我是CSS和bootstrap的新手。我有一个按钮,可以使导航侧边栏折叠,我只需要在导航边栏折叠时使页面内容浮动到左侧,如果导航侧边栏展开则缩小。
请建议我一个解决方案:(
下面是我的示例代码
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" >
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header ">
<button type="button" class="navbar-toggle visible-lg" data-toggle="collapse" data-target="#navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-default navbar-collapse" >
<div class="pull-left" id="navbar-ex1-collapse">
<ul class="nav navbar-default navbar-nav side-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" style="background:rgba(59, 89, 152, 0.28);"><i class="fa fa-user"></i> My Profile <b class="caret"></b></a>
<ul class="dropdown-menu">
<li ><a class="dropdown-color" href="#" style="background:rgba(59, 89, 152, 0.28);" ><i class="fa fa-user"></i> View Profile</a></li>
<li><a class="dropdown-color" href="#" style="background:rgba(59, 89, 152, 0.28);"><i class="fa fa-edit"></i> Edit Profile</a></li>
</ul>
</li>
<li><a href="Dashboard.html"><i class="fa fa-dashboard"></i> Dashboard</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-desktop"></i> Deployment <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#" style="background:rgba(59, 89, 152, 0.28);"><i class="fa fa-edit"></i> Deployment Parameter</a></li>
<li><a href="#" style="background:rgba(59, 89, 152, 0.28);"><i class="fa fa-bar-chart-o"></i> Package Deployment</a></li>
<li><a href="#" style="background:rgba(59, 89, 152, 0.28);"><i class="fa fa-bar-chart-o"></i> Release Deployment</a></li>
</ul>
</li>
</ul>
</div>
<ul class="nav navbar-nav navbar-right navbar-user">
<li class="dropdown user-dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> Username <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-user"></i> View Profile</a></li>
<li><a href="#"><i class="fa fa-gear"></i> Edit Profile</a></li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-power-off"></i> Log Out</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
<div class="auto-adjust" id="page-wrapper">
//table goes here
</div>
下面是我为调整内容而编写的css类
CSS:
.auto-adjust{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
margin:0;
float:left;
}
答案 0 :(得分:0)
在Twitters中更少编码默认情况下,@ grid-float-breakpoint(设置为768px)设置了导航栏折叠的点。现在,您可以使用CSS媒体查询仅在该点之前应用您的代码: 的少
@media (max-width: (@grid-float-breakpoint - 1)) {
padding-right: 15px;
padding-left: 15px;
margin: 0 auto;
float:left;
}
CSS输出:
@media (max-width: 767px) {
padding-right: 15px;
padding-left: 15px;
margin: 0 auto;
float: left;
}
请注意,您最好使用Bootstrap的网格,请参阅http://getbootstrap.com/css/#grid-media-queries。当绿色宽度小于768像素时,将应用xs网格。 请尝试以下代码:
<div class="row">
<div class="col-xs-12 col-sm-6">//table goes here</div>
<div class="col-xs-12 col-sm-6">//other content</div>
</div>