Bootstrap 3格没有差距
我试图创build一个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; }
DEMO – http://jsfiddle.net/pjBzY/
Bootstrap 3中的网格系统在Bootstrap 2的思维中需要略微偏移。BS2（ col-* ）中的列与BS3（ col-sm-*等）中的列不同义，但是一种达到相同结果的方法。
看看这个更新到你的小提琴： http : //jsfiddle.net/pjBzY/22/ （代码复制下面）。
首先，如果您想要各种尺寸的50/50列，则无需为每种屏幕尺寸指定一个列。 col-sm-6不仅适用于小屏幕，而且也适用于大中型，这意味着class="col-sm-6 col-md-6"是多余的（如果您想要改变不同的列宽大小的屏幕，如col-sm-6 col-md-8 ）。
至于利润率的问题，负利润率提供了一种以比BS2更为灵活的方式来alignment文本块的方法。 你会注意到，在jsfiddle中，第一列中的文本与row外的段落中的文本可视地alignment – 除了在“xs”窗口大小处，不应用列。
如果您需要的行为更接近您在BS2中的位置，每列之间有填充，并且没有可视的负边距，则需要为每列添加一个内部div。 查看我的jsfiddle中inner-content 。 在每一列中放置这样的东西，他们将会像BS2中的旧col-*元素一样行事。
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; }
另一种select是创build自己的特殊的CSS类，只要你想应用“gutterless”列。
HTML
<div class="container"> <div class="row no-gutter"> <div class="col-6 col-sm-6 col-lg-6">Col 1</div> <div class="col-6 col-sm-6 col-lg-6">Col 2</div> </div> </div>
CSS
.no-gutter [class*="-6"] { padding-left:0; }
演示： http ： //bootply.com/73960
我总是将这种风格添加到我的Bootstrap LESS / SASS：
.row-no-padding { [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } }
然后在HTML中，你可以写：
<div class="row row-no-padding">
您需要直接或使用自定义类，在大屏幕中覆盖.row的负边距
@media (min-width: 768px){ .row { margin-right: 0; margin-left: 0; } }
更新小提琴
我相信肯定会有这样做，而不写我自己的CSS，疯狂的我必须覆盖边距和填充，我想要的只是一个2列的网格。
.row-offset-0 { margin-left: 0; margin-right: 0; } .row-offset-0 > * { padding-left: 0; padding-right: 0; }
将martin和其他人的想法概括起来，你可以通过调整偶数和奇数列孩子的填充来粘合一堆列（不只是一对）。 添加一个类的定义， .no-gutter .row ，并将其放在你的.row元素上
.row.no-gutter > [class*='col-']:nth-child(2n+1) { padding-right: 0; } .row.no-gutter > [class*='col-']:nth-child(2n) { padding-left: 0; }
或者在SCSS：
.no-gutter { > [class*='col-'] { &:nth-child(2n+1) { padding-right: 0; } &:nth-child(2n) { padding-left: 0; } } }
@yuvilio给出的答案适用于两列，但对于两个以上来说， 这可能是一个更好的解决scheme。 综上所述：
.row.no-gutters { margin-right: 0; margin-left: 0; & > [class^="col-"], & > [class*=" col-"] { padding-right: 0; padding-left: 0; } }
使用“清除”而不是“行”。 它确实是一样的，除了没有负边界。 通过“行”的用法，你会看到这是唯一的区别。
更强大的（和100％stream体）Bootstrap 3网格现在有3种尺寸。 Tiny（用于智能手机.col-），Small（用于平板电脑.col-sm- ）和Large（用于笔记本电脑/桌面.col-lg- *）。 3个网格大小使您能够控制不同设备（桌面，平板电脑，智能手机等）上的网格行为。
与2.x不同，Bootstrap 3不提供固定（基于像素）的网格。 虽然固定宽度布局仍然可以使用简单的自定义包装来实现，但现在只有一个基于百分比（stream体）的网格。 .container和.row类现在默认为stream体，因此不要在3.x标记中使用.row-fluid或.container-fluid。
资源
.row.row-no-padding { margin-left: 0 !important; margin-right: 0 !important; & > [class^="col-"] { padding-left: 0 !important; padding-right: 0 !important; } }
简单的你可以使用波纹pipe类。
.nopadmar { padding: 0 !important; margin: 0 !important; }
<div class="container-fluid"> <div class="row"> <div class="col-md-6 nopadmar">Your Content<div> <div class="col-md-6 nopadmar">Your Content<div> </div> </div>
