Css 无间隙引导3栅格

我试图创建一个2列的网格，实际上是一个50%的网格，没有边距或填充

如何使用Bootstrap 3实现这一点我尝试了这一点，但最终在平板电脑/台式机断点处出现负边距：

HTML

演示-

---

您需要在大屏幕中直接或使用自定义类覆盖

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

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

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

---

另一个选项是创建自己的特殊CSS类，以便在任何时候应用“无槽”列

HTML

---

演示：

引导程序3中的网格系统需要从引导程序2的思想上进行一点横向转换。BS2中的列（

col-*

）并不等同于BS3中的列（

col sm-*

，等等），但有一种方法可以实现相同的结果

检查一下你的小提琴的更新：（代码复制如下）

首先，如果希望所有大小都有50/50列，则不需要为每个屏幕大小指定列

col-sm-6

不仅适用于小屏幕，也适用于中屏幕和大屏幕，这意味着

class=“col-sm-6 col-md-6”

是多余的（如果您想更改不同大小屏幕的列宽，例如

col-sm-6 col-md-8

，则会带来好处）

至于边距问题，负边距提供了一种比BS2更灵活的文本块对齐方式。您会注意到，在JSFIDLE中，第一列中的文本与

行

之外的段落中的文本在视觉上对齐——除了在“xs”窗口大小处，没有应用列

如果您需要更接近于BS2中的行为，在BS2中，每列之间都有填充，并且没有可视的负边距，那么您需要为每列添加一个内部div。请参阅我的JSFIDLE中的

内部内容。在每一列中放入类似的内容，它们的行为将与旧的
col-*
元素在BS2中的行为相同


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

使用“clearfix”而不是“row”。它的功能完全相同，只是没有负边距。逐步了解“行”用法，您会发现这是唯一的区别。
我总是将此样式添加到我的无引导/SASS中：

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

然后在HTML中，您可以编写：

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

根据martinedwards和其他人的想法，通过调整偶数和奇数列子列的填充，您可以将一串列粘在一起（而不仅仅是一对）。添加类的此定义，
.no gotter
，并将其放置在
.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;
        }
    }
}

对于两个列，给出的by很好，但是对于两个以上的列，from可能是一个更好的解决方案。总之：

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

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

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


.nopadmar{
填充：0！重要；
边距：0！重要；
}

你的内容
你的内容
是的，有负数页边距，但内容仍占满了100%的集装箱。我更新了提琴，但没有文本对齐中心，以便您可以更好地看到与此相关的问题：这可能会破坏其他可能需要页边距的脚本。在某些情况下，边距是有用的，但也需要有一种方法来删除边距。您可以始终使用自定义类（就像您在回答中所做的那样）。我们正在处理Bootstrap 3，这里没有
行流体
，抱歉，我没有看到有问题的“3”，我已经编辑了我的答案来使用Bootstrap 3我想Bootstrap相信你通常会想要列之间的填充（这样内容就不会接触），因此你的答案更像是一种定制需求，你可以通过在CSS中添加一些额外的规则来满足，我认为这没那么糟糕为什么不创建一个宽度为50%的div类呢？这就是你所需要的！一个只有一个属性的类。@koala_dev我认为应该是另一种情况，默认情况下没有填充，只在需要时添加它it@edsioufi我可能希望增加专栏的数量，感谢您加入JSFIDLE。总是更好。解释得很好，但问题与您提供的解决方案相反。我想要一个没有间隙或负边距的简单网格。然后，如果需要填充，则可以在需要时轻松地将其添加到col中。此示例显示，您这里的内容实际上不起作用，您需要删除行中的负边距：这只适用于6列网格，最好使用class*=“col-”来处理所有列。这只适用于我删除外部
{}
后的情况。我更喜欢这个解决方案，因为它选择的是
col
关键字，而不是特定的列宽！谢谢你链接到我的文章：）这个答案应该得到更多的关注！
.row-no-padding {
  [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

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

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

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

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

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

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