twitter-bootstrap 查看 Bootstrap 网格的简单方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12770591/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Easy way to see the Bootstrap grid?
提问by Radu Grama
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?
我正在使用 Bootstrap 处理一个简单的 HTML 页面，我希望有一种方法可以将列可视化，例如将它们“在”实际内容“下方”视为不同的阴影，例如Frameless 中的那种。有没有办法让这个功能变得简单？
采纳答案by Sherbrow
You can use some CSS with the backgroundto see the grid :
您可以使用一些 CSSbackground来查看网格：
[class*="span"] { background: #EEF; }
[class*="span"] [class*="span"] { background: #FEE; }
As suggested by Pavlo, you can also use a semi-transparent color which would give you different shades depending on the nesting (rgbabrowser support) :
根据 Pavlo 的建议，您还可以使用半透明颜色，根据嵌套（rgba浏览器支持）为您提供不同的色调：
[class^="span"] { background-color: rgba(255, 0, 0, 0.3); }
The same goes with .rowor any element of the grid.
这同样与.row或网格的任何元素。
Note: the choice between *=or ^=doesn't really matter in this case, see this (w3.org)for more info
注：之间的选择*=或^=没有真正的问题在这种情况下，看到这个（w3.org）更多信息
回答by MSC
Updated Sherbrow's answer for Bootstrap 3:
更新了 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);
}
回答by Aaron Terry
If you are using Firefox, Chrome, Safari, or another webkit browser, go to the page below and "install" the bookmarklet by dragging it to your bookmarks.
如果您使用的是 Firefox、Chrome、Safari 或其他 webkit 浏览器，请转到下面的页面并通过将书签拖到您的书签来“安装”书签。
Then you can view the grid for any page using foundation or bootstrap by clicking the bookmarklet and choose the framework.
然后，您可以通过单击书签并选择框架来使用基础或引导程序查看任何页面的网格。
回答by Greg
Since different containers on the same page can have different columns, a solution will have to support visualizing this. Just displaying a colored overlay is not that visually apparent. One easy solution is to just add temporary column elements at the top of each section that you want to visualize, such as the following snippet:
由于同一页面上的不同容器可以有不同的列，因此解决方案必须支持可视化。仅显示彩色叠加层在视觉上并不那么明显。一个简单的解决方案是在要可视化的每个部分的顶部添加临时列元素，例如以下代码段：
<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>
回答by digitaldonkey
I use some simple jQuery/javascriptfunction from console if I need.
It only works with a 12 grid, but you'll be smart. You may not close the overlay or click links. Just reload the page.
如果需要，我会从控制台使用一些简单的 jQuery/javascript函数。
它仅适用于 12 个网格，但您会很聪明。您不得关闭叠加层或单击链接。只需重新加载页面。
function bootstrap_overlay() {
var docHeight = $(document).height();
var grid = 12,
columns = document.createDocumentFragment(),
div = document.createElement('div');
div.className ='span1';
while (grid--) {
columns.appendChild(div.cloneNode(true));
}
var overlay = $('<div id="overlay"></div>');
overlay.height(docHeight)
.css({
"opacity" : 0.4,
"position": "absolute",
"top": 0,
"left": 0,
"width": "100%",
"z-index": 5000
})
.append('<div class="container"><div class="row"></div></div>')
.click(function(){ $(this).remove(); })
.find('.row').append(columns);
$("body").append(overlay);
$("#overlay .span1").css({
"opacity" : 0.4,
"background-color": "red"
}).height(docHeight);
}
回答by Zim
Bootstrap 3 has different class names (span*> col-*-*), and uses padding to create the gutter (spacing) between columns so simply putting a background-colorin the columns won't show the gutter.
Bootstrap 3 具有不同的类名 ( span*> col-*-*)，并使用填充在列之间创建装订线（间距），因此只需在列中放置 abackground-color就不会显示装订线。
For Bootstrap 3, you can add background-clip: content-boxto only show the background color within the content area...
对于 Bootstrap 3，您可以添加background-clip: content-box以仅显示内容区域内的背景颜色...
.row [class*='col-'] {
background-color: #ffeeee;
background-clip: content-box;
min-height: 20px;
}
回答by BobHU
If you are using Chrome, you can try this extension Bootstrap Grid Overlay
如果你使用的是 Chrome，你可以试试这个扩展Bootstrap Grid Overlay
I have used it with bootstrap v4, working fine with showing the columns.
我已经将它与 bootstrap v4 一起使用，可以很好地显示列。
