查看 Bootstrap 网格的简单方法？答案

【问题标题】：Easy way to see the Bootstrap grid?查看 Bootstrap 网格的简单方法？
【发布时间】：2019-07-20 12:37:07
【问题描述】：

我正在使用 Bootstrap 玩一个简单的 HTML 页面，我希望有一种方法可以将列可视化，例如将它们“置于”实际内容的“下方”作为不同的阴影，例如 @987654321 中的那个@。有没有办法让这个功能变得简单？

【问题讨论】：

【解决方案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);
}

【讨论】：

这会突出显示行，但不会突出显示列，因为没有显示装订线（列之间的间距）：codeply.com/go/NX0SqKupbB
bootstrapv4 怎么样？
@Nathan H - 似乎对 BS4 做了类似的工作，但我承认我没有深入研究过 BS4。

【解决方案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) 了解更多信息

【讨论】：

为什么不在背景上放一些半透明的颜色，所以它会在列顶部的列上“加起来”。
@Pavlo 我尝试了几次，最终得到了几乎无法区分的颜色 - 少数（取决于您的需要）嵌套规则可确保您获得最佳清晰度。
@Pavlo 谢谢你的建议
不使用背景，而是使用border-style:solid;

【解决方案3】：

如果您使用的是 Firefox、Chrome、Safari 或其他 webkit 浏览器，请转到下面的页面并通过将书签拖到您的书签来“安装”它。

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

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

【讨论】：

发现这个是在寻找带有 Bootstrap 列的仅限 Chrome 的错误。请注意，Chrome 不再是 web-kit，而是发明了自己的 html/css 系统，因此我们可以再次构建所有内容，就像使用旧 IE 一样。
在 Firefox 中像梦一样工作。杰出的。谢谢。 “安装”后，单击书签链接以打开和关闭。

【解决方案4】：

如果你使用的是 Chrome，可以试试这个扩展 Bootstrap Grid Overlay

我已经将它与 bootstrap v4 一起使用，可以很好地显示列。

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

【讨论】：

这非常简单，非常适合我想做的事情谢谢！

【解决方案7】：

Bootstrap 3 具有不同的类名 (span* > 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

【讨论】：