Bootstrap 3 .row alignment with Sidebar

问题

I've a full width page with sidebar and content areas. I need sidebar with fixed width value and the content areas width is rest of the page. As you can see on bootply example the second row goes under my sidebar which should not.

If I change .row:before, .row:after{display: table;} to table-cell, this problem looks solved however this is not a proper solution because it causes some other problems.

http://bootply.com/89133

回答1:

Wrap the main content in it's own section (or div or content, whichever) and then position the two main elements absolutely. That should work. Take a look (updated):

http://bootply.com/89155

<div class="container">
<aside>MENU SIDEBAR</aside>
<section>
    <div class="row">
        <div class="col-sm-12">FULL WIDTH BOX</div>
    </div>
    <div class="row">
        <div class="col-sm-12">FULL WIDTH BOX</div>
    </div>
</section>
</div>

css:

aside{
  position: absolute;
  width: 200px; 
  height: 500px; 
  background: red; 
  float: left;
}
section{ 
  position: absolute;
  left: 200px;
  padding-left: 100px;
  right: 0; 
}

来源：https://stackoverflow.com/questions/19503518/bootstrap-3-row-alignment-with-sidebar