设计和编码Bootstrap网格列或装订线？

Question

设计师经常使用Illustrator，Sketch等工具对我们的网站进行原型设计，并且在这样做时，设计师会尽量记住开发人员将用于向开发人员传达精确测量结果的网格。

网格通常按以下顺序实现：

1. 保证金（可选）
2. 列
3. Gutter
4. 重复2＆amp; 3
5. 保证金（可选）

在工具中设置网格后，设计人员将尝试将块放置到网格系统中，从列开始而不是排水沟。如下图所示：



然而，在Bootstrap v3中，一些元素占据了排水沟的宽度，因此这可能是不合适的，并且导致对如何正确设计这些网站的混淆。在下面的示例中，这些是表单输入。注意输入如何开始并包括15px装订线填充（插入十二个.col-xs-1，其中有跨距以指示边框）。 Codepen Link

.col-xs-1, .col-xs-3
  background-color: blue

.col-xs-1 span, .col-xs-3 span 
  background-color: pink

.form-control
  background-color: black !important`



然而在我的设计中，我试图从列开始，如下所示（列由灰色空间表示，由于响应性，列只是很薄但是排水沟保持不变 - 大小为iPhone 6 Plus）。



我误解了什么吗？由于我自己开发和设计产品，我不确定如何在Bootstrap中为包含设计中的阴沟的这些元素获得精确测量，然后开发它以匹配设计。当一些元素看起来占据了排水沟的宽度时，我如何设计Bootstrap网格？或者相反，如何更改Bootstrap代码以使某些元素不占用装订线的宽度？

元素通常采用排水沟的宽度吗？如果是这样，为什么设计师希望从专栏中进行设计？

（PS我知道有一个设计Stack Exchange，但我觉得这个问题可能来自对Bootstrap的误解，而不是设计原则）

Answer 1

我看到了你的难题。

要真正了解TWBS的网格系统，需要忽略先前的学习......边缘 - 列 - 装订线的设计框架虽然正确，但适用于像960gs这样的框架。该框架基于固定宽度网格系统，“列”设置固定的基于px的宽度。您已将此视为线框。

TWBS是一个响应式框架 - 主要区别在于无法修复宽度因为响应性很强;宽度需要缩放（屏幕调整大小时“移动”），因此基于百分比。

Web布局是一组列，如下所示：

<div class="container">
  <div class="row">
    <div class="col-md-*">content</div>
    ...
  </div>
</div>

并且列具有“填充”（左侧和右侧）。因此，框架是重复填充列填充的。

有关示例，请参阅此JSFiddle。

Answer 2

虽然我不太清楚我理解你的问题，但请允许我给你一些可能对你有帮助的见解。

虽然我遇到了希望他们的设计以1：1复制的客户，但是如果一个列是90或100px宽，只要它遵循整个站点的相同原则并且看起来是统一的，那么这并不重要。

Bootstrap在列之间没有作为边距的装订线，而是作为带有列的填充。也就是说，每列具有特定的百分比宽度 - 默认值除以12 - 并且在此列中，列的任一侧都存在填充 - 默认为15px。

这些列的容器（行类）的负边距等于此列中的填充。这样，第一列和最后一列的宽度实际上是列宽从列的任一侧减去一个填充，但总的来说它们最终是父包装容器的宽度。应根据您喜欢的列之间的GUTTER宽度来定义负边距和列填充，如：

装订线宽度= 2x填充宽度 填充宽度=行负边距宽度

希望它有意义。

Answer 3

考虑在上面的答案中添加更多内容，

12列网格系统是TWBS 3.xx的默认值，以及15px填充/装订线。

  

注意：12列网格系统是经过测试的设计，可为屏幕响应提供最佳用户体验

因此，您在上面使用的设计模板显然是默认的引导程序。设计师不必须坚持下去。除非他们对它好。并且如果设计师想要具有除15px之外的不同的天沟节奏，例如10px的。或者不同的列号，他们仍然可以通过编译bootstrap源代码来生成自定义版本。或者最简单的方法是使用网站上的customize tool。

提示： 如果需要，您可以使用简单的css行删除装订线。请参阅下面的解决方案

解释TWBS网格系统

• Bootstrap以100％/ 12宽度列单元格开始
• 然后每个单元格都有15px填充。右

进一步解释，

<div class="container">
  <div class="row">
    <div class="col-md-*">content</div>
    ...
  </div>
</div>

• 从class="container"开始，15px左右填充
• 然后class="row"附带-15px左右填充
• 因此，这会重置15px起点和终点差距
• 然后class="col-md-*"的填充为15px。因此，如果您将另一个容器放入其中并更改其背景颜色，则可以看到两侧的间隙。

所以这就是为什么你在你的例子中看到那里的排水沟。

快速解决方案，

.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}