您是否遇到过这样的情况，由于某些原因，文本和块由于某些原因而固执地不适合在Photoshop中进行布局，而不希望遵循该布局-不适合布局所指定的宽度？ 同时，设计人员和布局设计人员都使用相同的网格，例如Bootstrap 3网格。
在回顾了大量站点之后，我得出的结论是，在设计师和版图设计师中间，一个常见的错误逐渐蔓延。
引导网格（作为常见的网格示例）设置了12列的布局，在1200像素或更大的屏幕上，其尺寸介于30像素的列和左右两侧内容的15像素左右边距之间。 考虑到列的宽度是由设计人员设置的，以像素为单位，而布局设计人员是按百分比设置的，因此下面描述的错误不会立即引起注意。
设计人员如何使用网格？ 通常，此网格是由某些服务生成的，可以在Photoshop中下载并安装。 布局设计器如何与网格一起工作？ 网格取自Bootstrap 3框架。
如果网格的尺寸（列和间隔）相同，那又是什么问题呢？
问题的实质在于方便的CSS属性“ box-sizing”，其值为“ border-box”，默认情况下在引导程序中设置。 因此，除了内容的宽度（1170px加上左右两侧的15px的侧边距）之外，设计人员还考虑了侧边距的宽度，而布局设计师本人在不知道的情况下将其包括在内容的宽度中（1170px，包括15px的侧边距，即内容的宽度为1140像素）。 因此，事实证明，在项目的不同阶段，使用了两个不同的网格，而布局设计者的网格更窄。
当使用除Bootstrap以外的网格时，也会发生此错误。 显然，它是随着“边界盒”的出现而诞生的。
解决方案很简单-调整容器的大小：“容器{width：1200px;}”（1170px-内容加上左右两侧的15px缩进）。 还必须通过其他分辨率的屏幕的侧边间距对容器进行适当的调整。
在我看来，争论由谁来纠正错误是没有意义的。 这是设计人员与布局设计人员澄清此问题的好方式，并且布局设计人员应记住使用“边框”作为网格的这一功能。 广泛框架中的错误修复也将增加严格匹配设计的站点数量。