查看 Bootstrap 网格的简单方法? [英] Easy way to see the Bootstrap grid?

问题描述

我正在使用 Bootstrap 处理一个简单的 HTML 页面，我很想有一种方法来可视化这些列，例如将它们在实际内容下方"视为不同的阴影，例如 无框.有没有办法让这个功能变得简单?

I am playing with a simple HTML page using Bootstrap and I would love to have a way to visualize the columns, as in see them "underneath" the actual content as a different shade for example, something like the one at Frameless. Is there a way to get that functionality easy?

推荐答案

你可以使用一些带有 background 的 CSS 来查看网格:

You can use some CSS with the background to see the grid :

[class*="span"] { background: #EEF; }
[class*="span"] [class*="span"] { background: #FEE; }

演示 1 (jsfiddle)

根据 Pavlo 的建议，您还可以使用半透明颜色，根据嵌套情况为您提供不同的色调 (rgba 浏览器支持) :

As suggested by Pavlo, you can also use a semi-transparent color which would give you different shades depending on the nesting (rgba browser support) :

[class^="span"] { background-color: rgba(255, 0, 0, 0.3); }

演示 2 (jsfiddle)

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

The same goes with .row or any element of the grid.

注意:在这种情况下，*= 或 ^= 之间的选择并不重要，请参阅 这个 (w3.org) 了解更多信息

Note: the choice between *= or ^= doesn't really matter in this case, see this (w3.org) for more info

这篇关于查看 Bootstrap 网格的简单方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！