Bootstrap 3网格无间隙 [英] Bootstrap 3 grid with no gap

问题描述

我想创建一个2列网格，字面上有50％没有边距或填充。

I am trying to create a 2 column grid, with literally a 50% with no margins or padding.

如何使用Bootstrap实现这一点3我尝试这样做，但是在平板电脑/桌面断点处的负边距：

How do I achieve this with Bootstrap 3 I tried this but end up with negative margins at tablet/desktop break points:

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

DEMO -
http://jsfiddle.net/pjBzY/

DEMO - http://jsfiddle.net/pjBzY/

推荐答案

网格系统Bootstrap 3需要从Bootstrap 2的一个横向移动。BS2中的列（ col - * ）不是BS3中的列的同义词（ col-sm - * 等），但是有一种方法可以实现相同的结果。

The grid system in Bootstrap 3 requires a bit of a lateral shift in your thinking from Bootstrap 2. A column in BS2 (col-*) is NOT synonymous with a column in BS3 (col-sm-*, etc), but there is a way to achieve the same result.

您的小提琴： http://jsfiddle.net/pjBzY/22/ （代码如下）。

Check out this update to your fiddle: http://jsfiddle.net/pjBzY/22/ (code copied below).

首先，如果您要在所有大小上都有50/50列，则不需要为每个屏幕大小指定col。 col-sm-6 不仅适用于小屏幕，还适用于中等和大型，意味着 class =col-sm-6 col-md- 6是多余的（如果您想在不同大小的屏幕上更改列宽，则会带来好处，例如 col-sm-6 col-md-8 ）。

First of all, you don't need to specify a col for each screen size if you want 50/50 columns at all sizes. col-sm-6 applies not only to small screens, but also medium and large, meaning class="col-sm-6 col-md-6" is redundant (the benefit comes in if you want to change the column widths at different size screens, such as col-sm-6 col-md-8).

对于边距问题，负边距提供了一种以比BS2更灵活的方式对齐文本块的方法。你会注意到在jsfiddle中，第一列中的文本与行外的段落中的文本在视觉上对齐 - 除了xs窗口大小，其中

As for the margins issue, the negative margins provide a way to align blocks of text in a more flexible way than was possible in BS2. You'll notice in the jsfiddle, the text in the first column aligns visually with the text in the paragraph outside the row -- except at "xs" window sizes, where the columns aren't applied.

如果你需要的行为更接近你在BS2中的行为，在每列之间有填充，没有视觉负边距，你会需要为每个列添加一个内部div。请参阅我的jsfiddle中的 inner-content 。在每个列中加入这样的内容，它们的行为方式与旧的 col - * 元素在BS2中的行为一致。

If you need behavior closer to what you had in BS2, where there is padding between each column and there are no visual negative margins, you will need to add an inner-div to each column. See the inner-content in my jsfiddle. Put something like this in each column, and they will behave the way old col-* elements did in BS2.

jsfiddle HTML

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

这篇关于Bootstrap 3网格无间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！