타일 시스템에 부트 스트랩 그리드 사용 (JS 제외)

Question

부트 스트랩에는 12 열 레이아웃을 넘지 않도록하는 규칙 집합이 있습니다. 왜 그런지에 대한 문서를 읽었지 만,이 작은 모듈에 그리드를 사용하는 방식에서는 규칙 집합이 적용되는지 모르겠습니다.

<div class="col-xs-12 component"> 
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
     <span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span> 
     <span class="glyphicon-class">glyphicon glyphicon-asterisk</span> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
     <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 
     <span class="glyphicon-class">glyphicon glyphicon-plus</span> 
    </div> 

    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
     <span class="glyphicon glyphicon-cloud" aria-hidden="true"></span> 
     <span class="glyphicon-class">glyphicon glyphicon-cloud</span> 
    </div> 

    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
     <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> 
     <span class="glyphicon-class">glyphicon glyphicon-envelope</span> 
    </div> 

    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
     <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 
     <span class="glyphicon-class">glyphicon glyphicon-pencil</span> 
    </div> 
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> 
     <span class="glyphicon glyphicon-glass" aria-hidden="true"></span> 
     <span class="glyphicon-class">glyphicon glyphicon-glass</span> 
    </div> 
</div> 

이 데모 도구 모음, 당신은 출력의 크기를 조정할 때주의 경우 타일에 적응 :

여기 http://jsfiddle.net/6Lcx2k2t/

마크 업의 일부입니다 : 여기 내 바이올린 데모입니다 뷰포트의 변경. 그러나 마크 업에주의를 기울이면 실제로 부트 스트랩 그리드 클래스를 잘못 사용하고 있습니다 (12 점을 초과하면 그 이후의 모든 것이 다음 행으로 넘어갑니다). 나는이 브라우저에서 크로스 테스트를 해왔지만 아무도 내 접근 방식이 결국 휘발성이 될 수있는 이유를 말할 수 있습니까? 그런데 필자는 타일 주위에 col-xs-12 그리드 클래스로 div를 래핑하여 필자는 필자가 생각한 것처럼 부트 스트랩을 사용하지 않기 때문에 패딩을 얻을 수 없다. 이 접근법이 중심에 왜곡 될 것임을 알고 있지만, 제 경우에는 문제가 아닙니다. 이 한 행에 12을 초과 괜찮아 경우에 당신이 알고 싶은 가정 당신이 무엇을 요구 확실하지 않다

Answer 1

...

: 그 괜찮다고 생각합니다. 트위터 부트 스트랩은 행의 :first-child 또는 :last-child 요소 (더 이상) 아무것도하지 않기 때문에, 그래도 난에 추천 (12)

만 col-*-1, col-*-2, col-*-3, col-*-4, col-*-6 또는 col-*-12를 사용 초과 걱정하지 마세요 왜냐하면 12는이 숫자로 나눌 수 있기 때문입니다.