在 Bootstrap 3 中显示网格（列和装订线）？答案

【问题标题】：Display grid (columns and gutters) in Bootstrap 3?在 Bootstrap 3 中显示网格（列和装订线）？
【发布时间】：2014-02-14 19:08:40
【问题描述】：

我已经看到这个问题出现了几次，但对于旧版本的 Bootstrap。

寻找一种简单的方法来突出显示网格 - 列和排水沟。

这是我目前发现的：

https://github.com/ricardovf/bogrid - Ctrl-G 仍然会显示查找结果

http://alefeuvre.github.io/foundation-grid-displayer/ - 作品排序，以全宽显示列，但不显示更窄的列。

Easy way to see the Bootstrap grid? - 适用于 Bootstrap 2.3，不适用于 3。但是它只会显示组合列，而不是组合列中的每个单独的列。（已编辑）

[编辑] 理想情况下，列叠加将显示此页面上的示例正在显示的所有列：http://getbootstrap.com/examples/grid/

欢迎任何想法，谢谢！

【问题讨论】：

【解决方案1】：

我更改了上一个示例的 HTML/css，得到了一些结果，

[class*="col"]:hover { background: #000; }
[class*="col"] [class*="col"]:hover { background: red; }

这就是你要找的吗？

【讨论】：

谢谢！它在正确的轨道上（感谢这些更改 - 我明白我做错了什么）。问题是，该示例的跨度为 6 列（在 BS 3 中，对于寻求解决方案的其他人可能是 col-md-6，而不是 jsfiddle 中的 span6），有一个背景突出显示了 6 列的整个跨度。我想看看这 6 列以及它们之间的排水沟。
对不起，我看不到demo，我只是从代码中猜到的。只是为了确保我们在 BS3 上谈论的是同一件事：屏幕分为 12 列，因此 col-*-6 表示屏幕的 50%。中间键 (lg,md,sm,xs) 告诉您希望块在哪个时刻内联（而不是浮动）作为响应功能。我不确定你所说的排水沟是什么意思，容器填充？边距？
@Gutter - 抱歉，如果可能，列填充。在查看列方面，我希望看到这六列覆盖在 col-*-6 之上。
刚刚进行了编辑 - 希望列叠加显示此页面上的所有列：getbootstrap.com/examples/grid
jsfiddle.net/xFq47/3 我更新了小提琴。它确实涵盖了任何类型的 col (lg,md,sm,xs) 和任何数量的列 (12,11,10,9,8,7,6,5,4,3,2,1)。但我仍然不确定你在寻找什么。您是否有一个在线示例可以运行并提供此功能？

【解决方案2】：

使用它来突出显示网格列：

.row [class*='col-'] {
      background-color: #ffeeee;
      background-clip: content-box;
}

【讨论】：

[class*="col"] { background-color:rgba(0,85,142,0.2);边框：1px 实心 rgba（0,85,142,1）； padding:15px;} [class*="col"]:hover { background-color:rgba(194,57,142,0.2);边框：1px 实心 rgba(194,57,142,1);} [class*="col"] [class*="col"]:hover { background-color:rgba(194,57,142,0.2);边框：1px 实心 rgba(194,57,142,1);}