Making the content adjust when navigation sidebar is collapsed Bootstrap - html

Question

Hi I am new to CSS and bootstrap. I have a button which will make the navigation sidebar collapsible and all i need is to make the content of the page to float to the left when the navigation sidebar is collapsed and shrink if the navigation sidebar is expanded.
Kindly suggest me a solution :(
below is my sample code
<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">
<i class="fa fa-user"></i> My Profile <b class="caret"></b>
<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><i class="fa fa-dashboard"></i> Dashboard</li>
<li class="dropdown">
<i class="fa fa-desktop"></i> Deployment <b class="caret"></b>
<ul class="dropdown-menu">
<li><i class="fa fa-edit"></i> Deployment Parameter</li>
<li><i class="fa fa-bar-chart-o"></i> Package Deployment</li>
<li><i class="fa fa-bar-chart-o"></i> Release Deployment</li>
</ul>
</li>
</ul>
</div>
<ul class="nav navbar-nav navbar-right navbar-user">
<li class="dropdown user-dropdown">
<i class="fa fa-user"></i> Username <b class="caret"></b>
<ul class="dropdown-menu">
<li><i class="fa fa-user"></i> View Profile</li>
<li><i class="fa fa-gear"></i> Edit Profile</li>
<li class="divider"></li>
<li><i class="fa fa-power-off"></i> Log Out</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
<div class="auto-adjust" id="page-wrapper">
//table goes here
</div>
below is my css class which i wrote for adjusting the content
CSS:
.auto-adjust{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
margin:0;
float:left;
}

Answer 1

In Twitters Less code the point that the navbar collapse has been set by #grid-float-breakpoint (set to 768px) by default. Now you can use CSS media queries to only apply your code before that point:
less
#media (max-width: (#grid-float-breakpoint - 1)) {
padding-right: 15px;
padding-left: 15px;
margin: 0 auto;
float:left;
}
CSS output:
#media (max-width: 767px) {
padding-right: 15px;
padding-left: 15px;
margin: 0 auto;
float: left;
}
Notice that you probably better can use Bootstrap's grid, see http://getbootstrap.com/css/#grid-media-queries. The xs grid will be applied when the green width is smaller than 768 pixels too.
Try the following code:
<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>