CSS 没有间隙的 Bootstrap 3 网格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18202240/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 grid with no gap
提问by John Magnolia
I am trying to create a 2 column grid, with literally a 50% with no margins or padding.
我正在尝试创建一个 2 列网格，字面上是 50%，没有边距或填充。
How do I achieve this with Bootstrap 3 I tried this but end up with negative margins at tablet/desktop break points:
我如何使用 Bootstrap 3 实现这一点我试过了，但最终在平板电脑/台式机断点处出现负边距：
HTML
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
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/
采纳答案by keithjgrant
The grid system in Bootstrap 3 requires a bit of a lateral shift in your thinking from Bootstrap 2. A column in BS2 (col-*) is NOT synonymous with a column in BS3 (col-sm-*, etc), but there is a way to achieve the same result.
Bootstrap 3 中的网格系统需要您从 Bootstrap 2 中稍微横向转换一下。BS2 ( col-*) 中的列与 BS3 (col-sm-*等) 中的列不是同义词，但有一种方法可以实现相同的结果。
Check out this update to your fiddle: http://jsfiddle.net/pjBzY/22/(code copied below).
看看你的小提琴的这个更新：http: //jsfiddle.net/pjBzY/22/（下面复制的代码）。
First of all, you don't need to specify a col for each screen size if you want 50/50 columns at all sizes. col-sm-6applies not only to small screens, but also medium and large, meaning class="col-sm-6 col-md-6"is redundant (the benefit comes in if you want to change the column widths at different size screens, such as col-sm-6 col-md-8).
首先，如果您想要所有尺寸的 50/50 列，则不需要为每个屏幕尺寸指定 col。col-sm-6不仅适用于小屏幕，也适用于中大屏幕，这意味着class="col-sm-6 col-md-6"多余（如果您想在不同大小的屏幕上更改列宽，例如 ，好处就会出现col-sm-6 col-md-8）。
As for the margins issue, the negative margins provide a way to align blocks of text in a more flexible way than was possible in BS2. You'll notice in the jsfiddle, the text in the first column aligns visually with the text in the paragraph outside the row-- except at "xs" window sizes, where the columns aren't applied.
至于边距问题，负边距提供了一种以比 BS2 更灵活的方式对齐文本块的方法。您会在 jsfiddle 中注意到，第一列中的文本与外部段落中的文本在视觉上对齐row——除了“xs”窗口大小，其中未应用列。
If you need behavior closer to what you had in BS2, where there is padding between each column and there are no visual negative margins, you will need to add an inner-div to each column. See the inner-contentin my jsfiddle. Put something like this in each column, and they will behave the way old col-*elements did in BS2.
如果您需要更接近 BS2 中的行为，其中每列之间有填充并且没有视觉负边距，您将需要为每列添加一个内部 div。请参阅inner-content我的 jsfiddle 中的 。在每列中放置类似的内容，它们的行为方式col-*与 BS2 中旧元素的行为方式相同。
jsfiddle HTML
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>
and the CSS
和 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;
}
回答by Zim
Another option would be to create your own special CSS class for whenever you want to apply the "gutterless" columns..
另一种选择是创建自己的特殊 CSS 类，以便在您想要应用“gutterless”列时使用。
HTML
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
CSS
.no-gutter [class*="-6"] {
padding-left:0;
}
Demo: http://bootply.com/73960
回答by martinedwards
I always add this style to my Bootstrap LESS / SASS:
我总是将这种风格添加到我的 Bootstrap LESS / SASS 中：
.row-no-padding {
[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
Then in the HTML you can write:
然后在 HTML 中，您可以编写：
<div class="row row-no-padding">
回答by koala_dev
You'd need to override the negative margins from the .rowin large screens either directly or with a custom class
您需要.row直接或使用自定义类覆盖大屏幕中的负边距
@media (min-width: 768px){
.row {
margin-right: 0;
margin-left: 0;
}
}
回答by John Magnolia
I am sure there must be a way of doing this without writing my own CSS, its crazy I have to overwrite the margin and padding, all I wanted was a 2 column grid.
我确信必须有一种方法可以在不编写自己的 CSS 的情况下做到这一点，我必须覆盖边距和填充，这太疯狂了，我想要的只是一个 2 列网格。
.row-offset-0 {
margin-left: 0;
margin-right: 0;
}
.row-offset-0 > * {
padding-left: 0;
padding-right: 0;
}
回答by yuvilio
Generalizing on martinedwards and others' ideas, you can glue a bunch of columns together (not just a pair) by adjusting padding of even and odd column children. Adding this definition of a class, .no-gutter, and placing it on your .rowelement
概括 martinedward 和其他人的想法，您可以通过调整偶数和奇数列子项的填充将一堆列粘合在一起（不仅仅是一对）。添加类的此定义.no-gutter，并将其放置在您的.row元素上
.row.no-gutter > [class*='col-']:nth-child(2n+1) {
padding-right: 0;
}
.row.no-gutter > [class*='col-']:nth-child(2n) {
padding-left: 0;
}
Or in SCSS:
或者在 SCSS 中：
.no-gutter {
> [class*='col-'] {
&:nth-child(2n+1) {
padding-right: 0;
}
&:nth-child(2n) {
padding-left: 0;
}
}
}
回答by starfry
The answergiven by @yuvilioworks well for two columns but, for more than two, thisfrom heremight be a better solution. In summary:
该答案给出@yuvilio非常适用于两列，但对于两个以上，这从这里可能是一个更好的解决方案。总之：
.row.no-gutters {
margin-right: 0;
margin-left: 0;
& > [class^="col-"],
& > [class*=" col-"] {
padding-right: 0;
padding-left: 0;
}
}
回答by Kyle
Use "clearfix" instead of "row". It does the exact same except it doesn't have a negative margin. Step through the "row" usage and you'll see that's the only difference.
使用“clearfix”而不是“row”。除了没有负边距外，它的作用完全相同。逐步完成“行”用法，您会发现这是唯一的区别。
回答by Sandeep Pattanaik
Simple you can use bellow class.
简单你可以使用波纹管类。
.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>回答by xzegga
The more powerful (and 100% fluid) Bootstrap 3 grid now comes in 3 sizes. Tiny (for smartphones .col-), Small (for tablets .col-sm-) and Large (for laptops/desktops .col-lg-*). The 3 grid sizes enable you to control grid behavior on different devices (desktop, tablet, smartphone, etc..).
更强大（和 100% 流畅）的 Bootstrap 3 网格现在有 3 种尺寸。Tiny（适用于智能手机.col-）、Small（适用于平板电脑 .col-sm-）和 Large（适用于笔记本电脑/台式机 .col-lg-*）。3 种网格大小使您能够控制不同设备（台式机、平板电脑、智能手机等）上的网格行为。
Unlike 2.x, Bootstrap 3 does not provide a fixed (pixel-based) grid. While a fixed-width layout can still be acheived using a simple custom wrapper, there is now only one percentage-based (fluid) grid. The .container and .row classes are now fluid by default, so don't use .row-fluid or .container-fluid anymore in your 3.x markup.
与 2.x 不同，Bootstrap 3 不提供固定的（基于像素的）网格。虽然仍然可以使用简单的自定义包装器实现固定宽度的布局，但现在只有一个基于百分比的（流体）网格。.container 和 .row 类现在默认是可变的，所以不要在 3.x 标记中再使用 .row-fluid 或 .container-fluid 。
