Bootstrap 3网格没有间隙

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

更新了小提琴

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"多余(如果您想在不同大小的屏幕上更改列宽,则会带来好处,例如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;
}