36

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

4

10 回答 10

58

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

于 2013-08-13T17:37:38.640 回答
28

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

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

然后在 HTML 中你可以写：

<div class="row row-no-padding">
于 2014-05-19T15:48:17.960 回答
8

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

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

更新的小提琴

于 2013-08-13T06:49:40.140 回答
5

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

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

http://jsfiddle.net/KxCkD/

于 2013-08-13T06:53:40.873 回答
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"是多余的（如果你想在不同尺寸的屏幕上改变列宽，好处就来了，比如col-sm-6 col-md-8）。

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

如果您需要更接近 BS2 中的行为，即每列之间有填充并且没有视觉负边距，则需要为每列添加一个内部 div。inner-content在我的 jsfiddle 中查看。在每一列中放置这样的内容，它们的行为方式与旧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;
}
于 2013-11-12T18:27:14.420 回答
4

概括 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;
        }
    }
}
于 2015-09-30T23:12:23.667 回答
3

@yuvlio给出的答案适用于两列，但对于两列以上，这可能是一个更好的解决方案。总之：

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

  & > [class^="col-"],
  & > [class*=" col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}
于 2015-10-23T10:02:39.457 回答
1

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

于 2014-01-31T16:52:43.640 回答
0

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

资源

于 2013-08-13T07:07:59.390 回答
0

很简单，您可以使用下面的课程。

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

于 2016-06-16T05:40:38.640 回答