김정명 김정명 - 29 days ago 9
CSS Question

bootstrap empty space in ie9

<section class="content">
<div class="row">
<aside class="hidden-xs hidden-sm col-md-1 col-lg-1 fixed-left-bar">
<span class="about">about</span>
</aside>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 content-container">
<div class="hidden-xs hidden-sm col-md-6 col-lg-6 background"></div>
</div>
<aside class="hidden-xs hidden-sm col-md-3 col-lg-3 fixed-right-bar">
</aside>
</div>
</section>


div.background should be stay next to aside.fixed-right-bar, but page make scroll bar.
In chrome It works successfully. How can I remove that whitespace?

enter image description here

Answer

This is because of .row calss, it takes negative margin on left and right both sides.

.row {
    margin-right: -15px;
    margin-left: -15px;
}

Wrap your code in container or container-fluid classes.

<section class="content container-fluid">
 <div class="row">
  <aside class="hidden-xs hidden-sm col-md-1 col-lg-1 fixed-left-bar">
   <span class="about">about</span>
  </aside>
  <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 content-container">
   <div class="hidden-xs hidden-sm col-md-6 col-lg-6 background"></div>
  </div>
  <aside class="hidden-xs hidden-sm col-md-3 col-lg-3 fixed-right-bar">
  </aside>
 </div>
</section>
Comments