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

Question

嗨，我是初学者，试图在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列落在它们上面。

希望有人可以提供帮助。

Answer 1

Bootstrap的网格基于百分比，因此每列将是百分比而不是精确的像素宽度。单个col - * - 1列的唯一时间是70px，当屏幕大小等于或大于1170px时，如果您使用的是.container（而不是.container-fluid）。排水沟是列内的填充物，所以你没有看到，因为没有内部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。