仍然对 Bootstrap 3 中的网格感到困惑答案

【问题标题】：Still confused about the grid in Bootstrap 3仍然对 Bootstrap 3 中的网格感到困惑
【发布时间】：2014-03-01 21:14:26
【问题描述】：

您好，我是一名初学者，尝试在 Photoshop 中创建自己的基于 Bootstrap 3 网格的网页布局。

我已经下载了一些模仿 Bootstrap 3 网格的 .psd 文件，因此您可以围绕它们进行设计。

我还使用 Bootstrap 创建了一个 html 网格，您可以在此处查看 http://juanchandler.com/grid-test.html 查看源代码以查看代码。

我的问题是为什么列不是 70 像素宽和 30 像素的装订线宽度，就像 .psd 网格的情况一样...我用我的 html 截取了 .psd 网格的屏幕截图顶部，以便您可以看到列如何不对齐。 http://juanchandler.com/screenshot3.jpg 即。红色/鲑鱼列应该是排水沟，但我的 html 列落在它们上面。

希望有人能提供帮助。

【问题讨论】：

您在 SO 上提出了 9 个问题，只回复了一个请求以获取更多信息，并且您从未接受任何答案。对于那些花时间免费帮助你的人来说，这是非常粗鲁和不体贴的。

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

Bootstrap 的网格是基于百分比的，所以每一列都是一个百分比，而不是一个精确的像素宽度。如果您使用的是 .container（而不是 .container-fluid），则它在单个 col-*-1 列上的唯一一次是 70px 是屏幕尺寸等于或大于 1170px。排水沟是列内的填充，所以你看不到，因为没有内部 div 包装内容，为了看到排水沟，你必须在列内有 div 或某种容器：

<div class="col-sm-1 cell4"><div class="inner">&nbsp;</div></div>

然后在 div 中着色，而不是 col--

参见示例：http://jsbin.com/qotos/1/edit

就使用 Photoshop 而言，自 2011 年以来，我一直在做响应式设计，但从未使用过它。我所做的是用 CSS 设计并截屏。学习使用 LESS 或 SCSS。不过先学 CSS。

【讨论】：