Настроение сетки загрузочного лотка с использованием контура

Question

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

Когда я использую это, нижний ящик всегда слегка накладывается на две коробки непосредственно над ним. Я пробовал просматривать старые вопросы, но не нашел в этом никакого отношения.

HTML

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-6 col-sm-3 col-md-2 stategrid"> 
      <h5>1</h5> 
     </div> 
     <div class="col-xs-6 col-sm-3 col-md-2 stategrid"> 
      <h5>2</h5> 
     </div> 
     <div class="col-xs-6 col-sm-3 col-md-2 stategrid"> 
      <h5>3</h5> 
     </div> 
     <div class="col-xs-6 col-sm-3 col-md-2 stategrid"> 
      <h5>4</h5> 
     </div> 
     <div class="col-xs-6 col-sm-3 col-md-2 stategrid"> 
      <h5>5</h5> 
     </div> 
     <div class="col-xs-6 col-sm-3 col-md-2 stategrid"> 
      <h5>6</h5> 
     </div> 
     <div class="col-xs-6 col-sm-3 col-md-2 stategrid"> 
      <h5>7</h5> 
     </div> 
     <div class="col-xs-6 col-sm-3 col-md-2 stategrid"> 
      <h5>8</h5> 
     </div> 
     <div class="col-xs-6 col-sm-3 col-md-2 stategrid"> 
      <h5>9</h5> 
     </div> 
    </div> 
</div> 

CSS:

.stategrid { 
    outline: 3px solid #000; 
    background: #B1C3CD; 
    min-height: 40px; 
    text-align:center; 
} 

Codepen: http://codepen.io/abrite/pen/OROqPy

Можете ли вы определить, где я неправильно? Я предполагаю, что хочу использовать здесь ясное место, но мне не очень повезло.

Answer 1

Поскольку вы используете контур 2px, 1px находится за пределами границы каждой ячейки (col). Бутстрап-столбцы не имеют разницы, поэтому контур перекрывается все из ячеек по 1px. Если добавить запас 1px, контур не будет пересекаться ..

.stategrid { 
    outline: 2px solid #000; 
    background: #B1C3CD; 
    min-height: 40px; 
    text-align:center; 
    margin: 1px; 
} 

http://www.codeply.com/go/peZ1eNd78d

Если вы хотите 3px контур, запас должен составлять половину (1,5 пикселя) этого ..

.stategrid { 
    outline: 3px solid #000; 
    background: #B1C3CD; 
    min-height: 40px; 
    text-align:center; 
    margin: 1.5px; 
} 

Answer 2

Вы пытались добавить «маржу»?

.stategrid { 
outline: 2px solid #000; 
background: #B1C3CD; 
min-height: 40px; 
text-align:center; 
margin: 2px 2px 2px 2px; 
} 

Answer 3

По умолчанию контур добавляется к внешнему элементу. Таким образом, в вашем случае он добавляет 4px к ширине и высоте каждого элемента.

Вы можете использовать outline-offset: -2px, чтобы противодействовать этому, но IE не поддерживается.

Вы также можете использовать рамку вместо контура.