设计和编码以引导网格列或排水沟？答案

【问题标题】：Designing and Coding to Bootstrap Grid Columns or Gutters?设计和编码以引导网格列或排水沟？
【发布时间】：2016-08-14 18:18:54
【问题描述】：

设计师通常使用 Illustrator、Sketch 等工具对我们的网站进行原型制作，在这样做时，设计师会尽量记住开发人员将使用的网格，以便最好地向开发人员传达准确的测量结果。

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

保证金（可选）
列
排水沟
重复 2&3
保证金（可选）

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

但是，在 Bootstrap v3 中，一些元素占据了排水沟的宽度，因此这可能是不合适的，并且会导致对如何正确设计这些网站的困惑。在下面的示例中，这些是表单输入。注意输入是如何开始的，包括 15px 的装订线填充（插入了 12 个 .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而不是设计原则的误解）

【问题讨论】：

@DaniSpringer 我不同意。我不是要教程。我已经继续并试图澄清这个话题。主题是 HTML/CSS，可以理解，它可能会混淆代码和设计的界限。
这个问题很难阅读，我真的不明白你的意思。无论如何，设计应该允许 12 个引导列，在代码中复制它是由引导列完成的。看看minimit.com/articles/tips-resources/…，这些模板包含 15px 的内边距。
@LuukSkeur 您通常是从排水沟还是从柱子设计？
我查看了您发送的链接。同样，他们确实有明确定义的排水沟。那么，设计师应该如何开始元素来实现横向和纵向的节奏呢？ -- 你是从装订线开始一些元素，从列开始一些元素吗？
总是从列开始，排水沟应该总是空的，因为所有列都有 15 像素的边距。

标签： html css twitter-bootstrap

【解决方案1】：

我明白你的难题了。

要真正理解 TWBS 的网格系统，需要忽略之前的学习……margin-column-gutter 的设计框架虽然正确，但适用于 960gs 之类的框架。该框架基于固定宽度的网格系统，“列”设置了固定的基于 px 的宽度。你假设这是你的线框。

TWBS 是一个响应式框架 - 主要区别在于无法固定宽度，因为它是响应式的；宽度需要缩放（随着屏幕调整大小“移动”），因此基于百分比。

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

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

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

请参阅此JSFiddle 以获取示例。

【讨论】：

像 960gs 这样的框架是否有占用排水沟空间的元素？
我想我很困惑为什么元素会占用排水沟的空间。你不应该从专栏开始设计吗...？
是的 - 从列开始。装订线空间是一个指南，并且经常被使用 - 请记住，列不固定为 12（或框架的列数）。我所知道的所有框架都允许您跨越多个列，因此不可避免地会使用“排水沟”。

【解决方案2】：

虽然我不太确定我是否理解您的问题，但让我为您提供一些可能对您有所帮助的见解。

虽然我遇到过希望 1:1 复制他们的设计的客户，但恕我直言，列是 90 像素还是 100 像素宽并不重要，只要它在整个网站上遵循相同的原则并且看起来一致即可。

Bootstrap 没有将列之间的间距作为边距，而是作为列的填充。也就是说，每一列都有一个特定的百分比宽度 - 默认情况下除以 12ths - 在此列中，列的任一侧都存在填充 - 默认情况下为 15px。

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

gutter 宽度 = 2x padding 宽度填充宽度 = 行负边距宽度

希望它有意义。

【讨论】：

好的，所以我看到排水沟被认为是填充。那么，在设计时你会如何设置你的网格系统呢？您是否有 12 列将排水沟作为列的一部分？
正如我所说的......对我来说这没有什么区别 - 我已经设计了近 20 年；除此之外，我也是一个完美主义者。设计不应严格规定网页设计 - 更不用说您无法定义流畅的响应式设计。但是您上面问题的答案是肯定的，十二列的最外层的总宽度不包括它们的填充（因为负的父行边距）等于所需的网站宽度。

【解决方案3】：

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

12 列网格系统是 TWBS 3.xx 的默认设置，以及 15px 的 padding/gutter。

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

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

提示： 如果需要，您可以使用简单的 css 行来移除排水沟。解决方法见下文

那么解释一下TWBS网格系统

引导程序以 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;
}

【讨论】：