html - Bootstrap 3.2 列边距

Question

我一直在触及 Bootstrap 文档中未涵盖的区域，我认为这是在 Bootstrap 中向 col 添加边距。

为了解决这个问题，我使用了以下代码，但问题是中心框总是比外面的两个小。

有人解决这个问题吗？

HTML

    <div class="row">
    <div  class="col-lg-4">
        <div id="lightBlueFix" class="marginBoxes noMarginLeft"> 
            <div class="clearBoth"></div>
        </div>
    </div>
    <div class="col-lg-4">
        <div id="lightGrey" class="marginBoxes"> 
        </div>
    </div>
    <div class="col-lg-4">
        <div id="lightYellow" class="marginBoxes noMarginRight"> 
        </div>
    </div>     
  </div>

CSS

.marginBoxes {
    margin-left: 20px;
    margin-right: 20px;
} 
.noMarginLeft{
    margin-left:0 !important;   
}
.noMarginRight{
    margin-right:0 !important;  

}

Live Preview #

Answer 1

正如评论中所建议的那样，我会单独使用 Bootstrap 并将盒子分开，可能是沿着这些思路:

#lightBlueFix { background-color: blue; }
#lightGrey { background-color: grey; }
#lightYellow { background-color: yellow; }

.bannerBox {
    margin-left: 20px;
    margin-right: 20px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div class="row">
    <div  class="col-lg-4">
    	<div id="lightBlueFix" class="bannerBox"> 
            Blue
        </div>
    </div>
    <div class="col-lg-4">
        <div id="lightGrey" class="bannerBox"> 
            Grey
        </div>
    </div>
    <div class="col-lg-4">
        <div id="lightYellow" class="bannerBox"> 
            Yellow
        </div>
    </div>     
</div>