我试图创建一个2列网格，从字面上50％没有边距或填充。
我如何实现这个与Bootstrap 3我试过，但最终在平板电脑/桌面断点的负边距：
HTML
<div class="container">
<div class="row">
<div class="col-sm-6 offset-0">Col 1</div>
<div class="col-sm-6 offset-0">Col 2</div>
</div>
</diV>
CSS
.container {
background: green;
overflow: hidden;
}
.row > * {
background: blue;
color: #fff;
}
.row :first-child {
background: red;
}
.offset-0 {
padding-left: 0;
padding-right: 0;
}
解决方法
Bootstrap 3中的网格系统需要从Bootstrap 2的一个横向移动。BS2中的列(col- *)与BS3中的列(col-sm- *等)不同义，但是一种方式实现相同的结果。
看看这个更新到你的小提琴：http://jsfiddle.net/pjBzY/22/(代码复制如下)。
首先，如果您希望在所有大小上都有50/50列，则不需要为每个屏幕大小指定col。 col-sm-6不仅适用于小屏幕，而且适用于中等和大型，意味着class =“col-sm-6 col-md-6”是多余的(如果你想改变不同的列宽例如col-sm-6 col-md-8)。
至于边距问题，负边距提供了一种以比在BS2中可能的更灵活的方式对齐文本块的方式。您会注意到，在jsfiddle中，第一列中的文本与行外的段落中的文本(除了“xs”窗口大小，其中不应用列)对齐。
如果你需要更接近你在BS2中的行为，每一列之间有填充，没有视觉负边距，你将需要添加一个内部div到每一列。看到我的jsfiddle的内部内容。在每个列中都放置类似这样的行，并且它们的行为将与旧的col- *元素在BS2中的行为一致。
jsfiddle HTML
<div class="container">
<p class="other-content">Lorem ipsum dolor sit amet,consectetur adipiscing elit. Suspendisse aliquam sed sem nec viverra. Phasellus fringilla metus vitae libero posuere mattis. Integer sit amet tincidunt felis. Maecenas et pharetra leo. Etiam venenatis purus et nibh laoreet blandit.</p>
<div class="row">
<div class="col-sm-6 my-column">
Col 1
<p class="inner-content">Inner content - THIS element is more synonymous with a Bootstrap 2 col-*.</p>
</div>
<div class="col-sm-6 my-column">
Col 2
</div>
</div>
</div>
和CSS
.row {
border: blue 1px solid;
}
.my-column {
background-color: green;
padding-top: 10px;
padding-bottom: 10px;
}
.my-column:first-child {
background-color: red;
}
.inner-content {
background: #eee;
border: #999;
border-radius: 5px;
padding: 15px;
}
