您好，我是一名初学者，正在尝试在 Photoshop 中创建我自己的基于 Bootstrap 3 网格的网页布局。
我下载了一些模仿 Bootstrap 3 网格的 .psd 文件，因此您可以围绕它们进行设计。
我还使用 Bootstrap 创建了一个 html 网格，您可以在这里看到 http://juanchandler.com/grid-test.html查看源代码以查看代码。
我的问题是为什么列不是 70 像素宽和 30 像素的间距宽度，就像 .psd 网格的情况一样...我已经用我的 html 截取了 .psd 网格的屏幕截图top 这样你就可以看到列是如何不排列的。 http://juanchandler.com/screenshot3.jpg IE。红色/鲑鱼色列应该是排水沟，但我的 html 列落在它们上面。
希望有人能帮忙。
最佳答案
Bootstrap 的网格是基于百分比的，所以每一列都是百分比而不是精确的像素宽度。如果您使用的是 .container(而不是 .container-fluid)，那么它在单个 col-*-1 列上唯一为 70px 的情况是当屏幕尺寸等于或大于 1170px 时。装订线是列内的填充，所以您看不到它，因为没有包含内容的内部 div，为了看到装订线，您必须在列内有 div 或某种容器:
<div class="col-sm-1 cell4"><div class="inner"> </div></div>
并在 div 中着色，而不是 col--
参见示例:http://jsbin.com/qotos/1/edit
就使用 Photoshop 而言，自 2011 年以来，我一直在做响应式设计，但没有使用过它。我所做的是使用 CSS 进行设计并截取屏幕截图。学习使用 LESS 或 SCSS。不过先学习 CSS。
关于css - 仍然对 Bootstrap 3 中的网格感到困惑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22120465/