Легкий способ увидеть сетку Bootstrap?

Ответ 1

Вы можете использовать CSS с background для просмотра сетки:

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

Демо 1 (jsfiddle)

Как было предложено Pavlo, вы также можете использовать полупрозрачный цвет, который даст вам разные оттенки в зависимости от гнездования (rgba поддержка браузера):

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

Демо 2 (jsfiddle)

То же самое относится к .row или к любому элементу сетки.

Примечание: выбор между *= или ^= в данном случае не имеет особого значения, см. this (w3.org) для получения дополнительной информации

Ответ 2

Обновлен ответ Шерброу для 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);
}

Ответ 3

Если вы используете Firefox, Chrome, Safari или другой браузер веб-браузера, перейдите на страницу ниже и "установите" букмарклет, перетащив его в закладки.

Затем вы можете просмотреть сетку для любой страницы с помощью основы или начальной загрузки, щелкнув букмарклет и выбрав фреймворк.

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

Ответ 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);
}

Ответ 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/

Ответ 6

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

Ответ 7

Для начальной загрузки 4 в Chrome это расширение работает: https://chrome.google.com/webstore/detail/bootstrap-grid-overlay/mnlklmelflkheijccafopdohgclfefcg/

Ответ 8

Если вы используете Chrome, вы можете попробовать это расширение Bootstrap Grid Overlay

Я использовал его с bootstrap v4, прекрасно работает с отображением столбцов.