Bootstrap 3网格没有间隙答案

【问题标题】：Bootstrap 3 grid with no gapBootstrap 3网格没有间隙
【发布时间】：2013-08-14 15:57:12
【问题描述】：

我正在尝试创建一个 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;
}

演示 - http://jsfiddle.net/pjBzY/

【问题讨论】：

是的，有负边距，但内容仍然填充了 100% 的容器
我更新了没有文本对齐中心的小提琴，以便您更好地了解问题所在
相关：stackoverflow.com/q/24270137/1828879

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

简单的你可以使用下面的类。

.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>

【讨论】：

【解决方案2】：

@yuvilio 给出的answer 对两列效果很好，但对于两列以上，来自here 的this 可能是更好的解决方案。总结：

.row.no-gutters {
  margin-right: 0;
  margin-left: 0;

  & > [class^="col-"],
  & > [class*=" col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

【讨论】：

嘿！感谢您链接到我的文章:)

【解决方案3】：

概括 martinedwards 和其他人的想法，您可以通过调整偶数和奇数列子项的填充将一堆列（不仅仅是一对）粘合在一起。添加这个类的定义.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;
}

或者在 SCSS 中：

.no-gutter  {
    > [class*='col-'] {
        &:nth-child(2n+1) {
            padding-right: 0;
        }
        &:nth-child(2n) {
            padding-left: 0;
        }
    }
}

【讨论】：

这个答案应该得到更多关注！

【解决方案4】：

我总是将这种风格添加到我的 Bootstrap LESS / SASS 中：

.row-no-padding {
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

然后你可以在 HTML 中写：

<div class="row row-no-padding">

【讨论】：

这仅在我删除外部{} 后对我有用。我更喜欢这个解决方案，因为它通过col 关键字进行选择，而不是特定的列宽。
只是让您知道：提供的代码不是 CSS，它是 LESS，这就是为什么您必须删除外部 {}

【解决方案5】：

使用“clearfix”而不是“row”。它的作用完全相同，只是没有负边距。逐步了解“行”的用法，您会发现这是唯一的区别。

【讨论】：

【解决方案6】：

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 中注意到，第一列中的文本在视觉上与 row 之外的段落中的文本对齐——除了“xs”窗口大小，其中不应用列。

如果您需要更接近 BS2 中的行为，即每列之间有填充并且没有视觉负边距，则需要为每列添加一个内部 div。请参阅我的 jsfiddle 中的 inner-content。在每一列中添加这样的内容，它们的行为将与旧的 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;
}

【讨论】：

很好解释，但问题与您提供的解决方案相反。我想要一个没有间隙或负边距的简单网格。然后，如果需要填充，可以在需要时轻松添加到 cols 中。

【解决方案7】：

另一种选择是创建您自己的特殊 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

【讨论】：

这个例子说明你在这里的东西并没有真正起作用，你需要从行中删除负边距：bootply.com/132839
这仅适用于 6 列网格，最好使用 class*="col-" 为所有。

【解决方案8】：

更强大（且 100% 流畅）的 Bootstrap 3 网格现在有 3 种尺寸。 Tiny（适用于智能手机 .col-）、Small（适用于平板电脑 .col-sm-）和 Large（适用于笔记本电脑/台式机 .col-lg-*）。 3 种网格大小使您能够控制不同设备（台式机、平板电脑、智能手机等）上的网格行为。

与 2.x 不同，Bootstrap 3 不提供固定的（基于像素的）网格。虽然仍然可以使用简单的自定义包装器来实现固定宽度的布局，但现在只有一个基于百分比的（流体）网格。 .container 和 .row 类现在默认是流动的，所以不要在 3.x 标记中再使用 .row-fluid 或 .container-fluid。

Source

【讨论】：

我们在这里处理的是 Bootstrap 3，没有 row-fluid 了
对不起，我没有看到有问题的“3”，我已经编辑了我的答案以使用 Bootstrap 3

【解决方案9】：

您需要直接或使用自定义类覆盖大屏幕中 .row 的负边距

@media (min-width: 768px){
    .row {
        margin-right: 0;
        margin-left: 0;
    }
}

Updated fiddle

【讨论】：

这可能会破坏其他可能需要边距的脚本。边距在某些情况下很有用，但也需要有一种方法来删除它
您始终可以使用自定义类（就像您在回答中所做的那样）

【解决方案10】：

我确信一定有一种方法可以在不编写自己的 CSS 的情况下做到这一点，我必须覆盖边距和填充，这太疯狂了，我想要的只是一个 2 列网格。

.row-offset-0 {
    margin-left: 0;
    margin-right: 0;
}
.row-offset-0 > * {
    padding-left: 0;
    padding-right: 0;
}

http://jsfiddle.net/KxCkD/

【讨论】：

我猜 Bootstrap 认为您通常会想要列之间的填充（因此内容最终不会接触），因此您的需求更多是自定义需求，您可以通过添加一些额外的来满足你的 CSS 规则，我认为这不是那么糟糕
为什么不用width:50%创建一个div类呢？这就是你所需要的！具有单一属性的类。
@koala_dev 我只是认为应该反过来，默认没有填充，只有在需要时才添加
@edsioufi 我可能希望增加列数
感谢您提供 jsFiddle。总是更好。