윤곽을 사용하여 부트 스트랩 그리드 겹침 처리

부트 스트랩을 사용하여 모든 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를 식별 할 수

내가 잘못거야? 나는 여기서 어딘가에 맑은 것을 사용하고 싶다고 생각하지만 운이별로 없다.

출처

2016-10-04 arb

개요가 2px이므로 1px는 각 셀 (col)의 경계를 벗어납니다. 부트 스트랩 열에 여백이 없으므로 외곽선이 중복됩니다. 모두 (1 픽셀 씩). 당신이 1 x 1 픽셀의 마진을 추가하는 경우, 윤곽은 당신이 3px의 개요를 원한다면 ..

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

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

가, 여백 그 중 절반 (1.5px)해야 중복되지 않습니다 ..

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

출처

2016-10-04 19:28:53 ZimSystem

완벽했습니다. 정말 고맙습니다! 나는 지나치지 않았다. – arb

당신은 "여유"를 추가하려고 했습니까?

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

출처

2016-10-04 19:09:14 pred

기본적으로 외곽선은 요소 외부에 추가됩니다. 그래서 귀하의 경우에는 각 요소의 너비와 높이에 4px를 추가합니다.

outline-offset: -2px을 사용하면이 문제를 해결할 수 있지만 IE에서는 지원되지 않습니다.

외곽선 대신 경계선을 사용할 수도 있습니다.

출처

2016-10-04 19:29:03

윤곽을 사용하여 부트 스트랩 그리드 겹침 처리

답변

관련 문제