没有间隙的 Bootstrap 3 网格 [英] Bootstrap 3 grid with no gap

问题描述

我正在尝试创建一个 2 列网格，字面上是 50%，没有边距或填充.

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

HTML

<div class="row"><div class="col-sm-6 offset-0">Col 1</div><div class="col-sm-6 offset-0">Col 2</div>
</diV>

CSS

.container {背景:绿色；溢出:隐藏；}.row >* {背景:蓝色；颜色:#fff;}.row :第一个孩子{背景:红色；}.offset-0 {填充左:0;填充右:0;}

演示 -http://jsfiddle.net/pjBzY/

解决方案

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.请参阅我的 jsfiddle 中的 inner-content.在每一列中放置类似的内容，它们的行为方式将与旧 col-* 元素在 BS2 中的行为方式相同.

<小时>

jsfiddle HTML

<p class="other-content">Lorem ipsum dolor sat amet，consectetur adipiscing 精英.Suspendisse aliquam sed sem nec viverra.Phasellus fringilla metus vitae libero posuere mattis.整数坐 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">第 1 列<p class="inner-content">内部内容 - 这个元素更像是 Bootstrap 2 col-* 的同义词.</p>
<div class="col-sm-6 my-column">第 2 列

和 CSS

.row {边框:蓝色1px实心；}.我的专栏{背景颜色:绿色；填充顶部:10px；填充底部:10px；}.我的专栏:第一个孩子{背景颜色:红色；}.inner-content {背景:#eee;边框:#999；边框半径:5px；填充:15px；}

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

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/

解决方案

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.

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

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

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.

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

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

and the 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屋！