我正在使用 Bootstrap 玩一个简单的 HTML 页面，我希望有一种方法来可视化列，例如将它们“置于”实际内容的“下方”作为不同的阴影，例如Frameless中的那个。有没有办法让这个功能变得简单？
问问题
42456 次
7 回答
37
更新了 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);
}
于 2014-11-04T23:32:29.700 回答
15
您可以使用一些 CSSbackground来查看网格：
[class*="span"] { background: #EEF; }
[class*="span"] [class*="span"] { background: #FEE; }
正如 Pavlo 所建议的，您还可以使用半透明颜色，这将根据嵌套（rgba浏览器支持）为您提供不同的色调：
[class^="span"] { background-color: rgba(255, 0, 0, 0.3); }
.row网格的任何元素也是如此。
注意：在这种情况下，选择*=或^=无关紧要，请参阅此（w3.org）了解更多信息
于 2012-10-07T17:09:16.820 回答
11
如果您使用的是 Firefox、Chrome、Safari 或其他 webkit 浏览器，请转到下面的页面并通过将它拖到您的书签中来“安装”书签。
然后，您可以通过单击小书签并选择框架来使用基础或引导程序查看任何页面的网格。
于 2013-06-06T04:24:05.457 回答
2
于 2019-07-20T04:37:07.683 回答
1
如果需要，我会从控制台
使用一些简单的 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);
}
于 2013-06-06T01:19:50.093 回答
1
由于同一页面上的不同容器可以有不同的列，因此解决方案必须支持可视化。仅显示彩色叠加层在视觉上并不明显。一个简单的解决方案是在要可视化的每个部分的顶部添加临时列元素，例如以下代码段：
<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>
于 2017-01-17T17:50:30.340 回答
0
Bootstrap 3 具有不同的类名 ( span*> col-*-*)，并使用填充在列之间创建装订线（间距），因此只需将 abackground-color放入列中就不会显示装订线。
对于 Bootstrap 3，您可以添加background-clip: content-box仅在内容区域内显示背景颜色...
.row [class*='col-'] {
background-color: #ffeeee;
background-clip: content-box;
min-height: 20px;
}
于 2016-07-05T16:43:29.650 回答