问题标签 [gutter]

我才刚刚开始使用引导程序并且不确定如何实现我的目标。

我希望所有的排水沟都是均匀的，就像他们在这张图片中一样：

默认情况下，它们看起来像这样，列之间的垂直排水沟（用蓝色标记）是水平排水沟和外部排水沟的两倍：

任何有关解决此问题的最佳方法的帮助可能都会受到赞赏。

新的 Bootstrap 3 网格系统很棒。它对于所有屏幕尺寸的响应式设计都更强大，并且更容易嵌套。

但我有一个问题我无法弄清楚。如何在列之间添加精确的间隙？假设我有 960px 的容器，310px 的 3 列和 3 列之间 15px 的 2 个排水沟。我怎么做？

我在这里看到了多个关于带有固定排水沟的流体网格的问题和答案。我还看到了很多关于等高流体宽度 div 列的信息。我试图同时做这两件事，但没有找到具体的解决方案。

我能够让它工作，但我的解决方案似乎有点“hacky”和不稳定。下面是我的 jsFiddle 链接标记。这是使用固定排水沟完成等高流体宽度 div 的安全方法，还是您推荐更好的解决方案？最近我一直在尝试改进我的语义并编写健壮的代码......

**浏览器支持只需要 IE9+

jsFiddle

HTML

CSS

我最担心的是空的排水沟div。我感谢任何建设性的反馈。

我正在尝试重现同位素网站上显示的容器居中效果。

我margin: 0 auto在容器上设置了 CSS，但容器没有调整大小（因此无法使用 CSS width）margin: 0 auto。

我还在项目之间设置了排水沟，但这也不起作用。

这是我的做法。

顺便说一句，我怎样才能让项目出现并立即就位（如官方网站所示）而不是“滑动切换”？

由于工作要求，我用 bootstrap 2 制作了一个页面并面临以下挑战，请理解我正在学习它；）我#mainDiv在 div 下面有一个带有我的 bootstrap 命名空间.bootstrapDiv

下面我有一个.row-fluid，在他们下面 2 .span12，这是我的问题；

我需要能够将margin-right:0第一个和margin-left:0第二个放在一起，这两个 div 应该填充尊重其余行的总体布局的行。

我如何看待它们在左边是好的，但在右边缺少这个排水沟宽度并且看起来一点也不好看，如果你取出元素的内部水平边距，是否有任何特殊的类可以水平扩展行及其内容?

你应该如何正常解决这个问题？

编辑

这是我的小提琴：

http://jsfiddle.net/qdb74/

我指的是黑色空间

我正在使用最新的引导程序，我没有运气在响应网格中的项目之间添加简单的边距。我有一个简单的网格，它根据 col 设置（col-lg / col-md / col-sm / col-xs）从 4 / 3 / 2 / 1 列缩放

我想要一种简单的方法来覆盖默认样式（或直接使用 less 属性）以获得带有上述布局的项目之间的简单边距。

默认情况下，这可以正确堆叠，但每个项目都直接相邻。如何以最少的黑客攻击达到所需的排水沟宽度？

I'm looking for a sass grid system that does not have edge gutters, a.k.a. there is no left gutter applied to the first column, and no right gutter applied to the last column.

Normally you could simply use :first-child / :last-child to remove the gutters, but then the first/last columns would be slightly wider than the rest (I'm using padding as gutters).

Is there a grid system that supports this? Or would I be better off writing it on my own?

Edit: I decided to go ahead and try writing my own solution :) Answer below.

根据提供给我的设计，我将引导程序的容器宽度更改为 981px。

我注意到装订线宽度设置为 30px，但是当容器宽度不同时，我如何确定什么是好的宽度？

我想将容器的最大宽度保持在 981 像素，因为这就是设计师在 Photoshop 中实现布局的方式。

例如，有一个 981px 宽的图像，它跨越了容器的整个宽度。

在我自制的 CSS 网格中，我遇到了问题。如果我的 .row 边缘接触到身体边缘，它将产生溢出。在此处查看演示：http: //jsfiddle.net/57BGe/3/ 已更新以供解释

我怎样才能防止溢出？（溢出：无，不起作用，因为您仍然可以在手机上滚动并在桌面上用力）

* 更新 * 如果您查看 Bootstrap # http://getbootstrap.com/css/ 尝试使用开发控制台并将 .row 的 margin-left 更改为会使身体溢出的东西。（例如-150px）
如果我这样做，我仍然不能水平滚动。

所以我一直在与这种情况作斗争。
标记

CSS

这使得列正确并排显示。但是两端相互折叠，整个东西看起来像一个大矩形。

现在，我尝试通过编辑现有的 CSS 样式[class*="col"]并添加padding-right : 20px到它来伪造排水沟

现在一切看起来像

我已经设法放入排水沟，但如果你仔细观察，三个灰色矩形不在容器 div 内居中，它们更多地被推向右侧。
如何应对这种情况？如果有人建议一种更好的方法来添加排水沟，那将非常有帮助。
谢谢
（图片中的蓝色突出显示列的实际大小）