Question

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

Answer 1

另一个选择是在你想要应用“无沟壑”的列时创建自己的特殊CSS类。

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

Answer 2

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

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

然后在HTML中你可以写：

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

Answer 3

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

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

<强> Updated fiddle

Answer 4

我确信必须有一种方法可以在不编写自己的CSS的情况下执行此操作，我必须覆盖边距和填充，所有我想要的是2列网格。

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

http://jsfiddle.net/KxCkD/

Answer 5

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"是多余的（如果您想在不同大小的屏幕上更改列宽，则会带来好处，例如{{1} }）。

至于边距问题，负边距提供了一种以比BS2更灵活的方式对齐文本块的方法。您会注意到，在jsfiddle中，第一列中的文本与col-sm-6 col-md-8之外的段落中的文本在视觉上对齐 - 除了“xs”窗口大小，其中未应用列。

如果您需要的行为更接近您在BS2中的行为，每列之间有填充且没有可视负边距，则需要为每列添加一个内部div。请参阅我的jsfiddle中的row。在每一列中添加这样的内容，它们的行为方式与BS2中旧的inner-content元素的行为方式相同。

jsfiddle HTML

col-*

和CSS

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

Answer 6

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

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

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

Answer 7

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

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

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

Answer 8

使用“clearfix”而不是“row”。它完全相同，只是它没有负余量。逐步执行“行”用法，您将看到这是唯一的区别。

Answer 9

更强大（和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

Answer 10

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

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

Bootstrap 3网格没有间隙

10 个答案: