Twitter bootstrap 查看引导网格的简单方法？

我正在使用Bootstrap处理一个简单的HTML页面，我希望能够有一种可视化列的方法，比如在实际内容的“下方”看到不同的阴影，例如，类似于上一页的阴影。有没有一种方法可以轻松实现该功能？

您可以在

背景中使用一些CSS来查看网格：

[class*=“span”]{背景：#EEF；}
[class*=“span”][class*=“span”]{背景：#费用；}


正如Pavlo所建议的，您也可以使用半透明颜色，根据嵌套的不同，该颜色会给您不同的色调（）：

[class^=“span”]{背景色：rgba（255,0,0,0.3）；}


这同样适用于
.row
或网格的任何元素

注意：在这种情况下，
*=
或
^=
之间的选择实际上并不重要，有关更多信息，请参见如果需要，我会从控制台使用一些简单的jQuery/javascript函数。
它只适用于12个电网，但你会很聪明。您不能关闭覆盖或单击链接。只需重新加载页面

function bootstrap\u overlay（）{
var docHeight=$（document）.height（）；
var网格=12，
columns=document.createDocumentFragment（），
div=document.createElement（'div'）；
div.className='span1'；
而（网格--）{
columns.appendChild（div.cloneNode（true））；
}
var overlay=$（''）；
覆盖层高度（八）
.css({
“不透明度”：0.4，
“位置”：“绝对”，
“顶部”：0，
“左”：0，
“宽度”：“100%”，
“z指数”：5000
})          
.append（“”）
.单击（函数（）{$（this）.remove（）；}）
.find（'.row'）.append（列）；
$（“正文”）。附加（覆盖）；
$（“#overlay.span1”）.css({
“不透明度”：0.4，
“背景色”：“红色”
}).身高（八岁）；
}
如果您使用的是Firefox、Chrome、Safari或其他webkit浏览器，请转到下面的页面，通过将书签拖动到书签中来“安装”书签

您可以通过单击BookMART并使用框架来查看任何页面的基础或Bootstrap。
更新了Sherbrow对Bootstrap 3的回答：

div[class="row"] {
    outline: 1px dotted rgba(0, 0, 0, 0.25);
}

div[class^="col-"] {
    background-color: rgba(255, 0, 0, 0.2);
    outline: 1px dotted rgba(0, 0, 0, 0.5);
}

Bootstrap 3具有不同的类名（
span*
col-*-*
），并使用填充来创建列之间的间距，因此只需在列中添加
背景色
，就不会显示间距

对于Bootstrap 3，您可以添加
背景剪辑：内容框
，以仅显示内容区域内的背景颜色

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

由于同一页面上的不同容器可以有不同的列，因此解决方案必须支持将其可视化。仅显示彩色覆盖层在视觉上并不明显。一个简单的解决方案是只在要可视化的每个部分的顶部添加临时列元素，例如以下代码段：

<div class='col-xs-1 alert alert-info'>1</div>
<div class='col-xs-1 alert alert-success'>2</div>
<div class='col-xs-1 alert alert-warning'>3</div>
<div class='col-xs-1 alert alert-danger'>4</div>
<div class='col-xs-1 alert alert-info'>5</div>
<div class='col-xs-1 alert alert-success'>6</div>
<div class='col-xs-1 alert alert-warning'>7</div>
<div class='col-xs-1 alert alert-danger'>8</div>
<div class='col-xs-1 alert alert-info'>9</div>
<div class='col-xs-1 alert alert-success'>10</div>
<div class='col-xs-1 alert alert-warning'>11</div>
<div class='col-xs-1 alert alert-danger'>12</div>

1
2.
3.
4.
5.
6.
7.
8.
9
10
11
12

演示：
如果您正在使用Chrome，可以尝试此扩展

我在引导v4中使用过它，可以很好地显示列

为什么不在背景上添加一些半透色，这样它就会在列顶部的列上“累加起来”。@Pavlo我尝试了几次，结果得到了几乎无法区分的颜色-其中少数（取决于您的需要）嵌套规则可以保证您的最佳清晰度。@Pavlo感谢您的建议，而不是使用背景，使用边框样式：实心；在查找仅限Chrome且带有引导列的错误时发现此错误。新用户注意，Chrome不再是网络工具包，它已经发明了自己的html/css系统，所以我们可以像旧IE一样再次构建所有东西。在Firefox中工作就像做梦一样。明亮的谢谢“安装”后，单击书签链接以打开和关闭。这会高亮显示行，但不会高亮显示列，因为没有显示边沟（列之间的间距）：bootstrapv4如何？@Nathan H-似乎对BS4做了类似的工作，但不可否认，我还没有深入研究过BS4。这对于我想要做的事情来说是非常简单和伟大的。谢谢！
<div class='col-xs-1 alert alert-info'>1</div>
<div class='col-xs-1 alert alert-success'>2</div>
<div class='col-xs-1 alert alert-warning'>3</div>
<div class='col-xs-1 alert alert-danger'>4</div>
<div class='col-xs-1 alert alert-info'>5</div>
<div class='col-xs-1 alert alert-success'>6</div>
<div class='col-xs-1 alert alert-warning'>7</div>
<div class='col-xs-1 alert alert-danger'>8</div>
<div class='col-xs-1 alert alert-info'>9</div>
<div class='col-xs-1 alert alert-success'>10</div>
<div class='col-xs-1 alert alert-warning'>11</div>
<div class='col-xs-1 alert alert-danger'>12</div>