Question

我正在玩一个使用Bootstrap的简单HTML页面，我希望有一种可视化列的方法，就像在“下面”将实际内容视为不同的阴影，例如{{{{{{ 3}}。有没有办法让这个功能变得简单？

Answer 1

更新了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);
}

Answer 2

您可以使用background的一些CSS来查看网格：

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

Demo 1 (jsfiddle)

正如Pavlo建议的那样，你也可以使用半透明的颜色，根据嵌套（rgba browser support）会给你不同的颜色：

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

Demo 2 (jsfiddle)

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

注意：*=或^=之间的选择在这种情况下并不重要，有关详细信息，请参阅this (w3.org)

Answer 3

如果您使用的是Firefox，Chrome，Safari或其他网络套件浏览器，请转到下面的页面并按＆＃34;安装＆＃34;将书签拖到书签上。

然后，您可以通过单击书签并选择框架来查看使用基础或引导程序的任何页面的网格。

http://alefeuvre.github.io/foundation-grid-displayer/

Answer 4

如果需要，我在控制台中使用一些简单的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);
}

Answer 5

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

<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>

演示：https://jsfiddle.net/7zea43o8/7/

Answer 6

Bootstrap 3有不同的类名（span*＆gt; col-*-*），并使用填充来创建列之间的装订线（间距），因此只需将background-color放入“赢得的列”中显示阴沟。

对于Bootstrap 3，您可以添加background-clip: content-box仅显示内容区域中的背景颜色...

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

http://codeply.com/go/pejyqLlrBF

Answer 7

如果您使用的是Chrome，则可以尝试使用此扩展程序Bootstrap Grid Overlay

我在bootstrap v4中使用了它，可以很好地显示列。

轻松查看Bootstrap网格？

7 个答案: