0

12 개의 소셜 아이콘이 있습니다. 정제 모드에서 각 행부트 스트랩이 필요한 열의 반응 배열

3 모바일 각 행

1 (4 개 행을 만든다)

데스크탑 모드에서 행

12 (행 1한다)

내가되도록 할

<div class='container'> 
    <div class='row'> 

<div class='col-md-1'></div> 
<div class='col-md-1'></div> 
<div class='col-md-1'></div> 
<div class='col-md-1'></div> 

<div class='col-md-1'></div> 
<div class='col-md-1'></div> 
<div class='col-md-1'></div> 
<div class='col-md-1'></div> 

<div class='col-md-1'></div> 
<div class='col-md-1'></div> 
<div class='col-md-1'></div> 
<div class='col-md-1'></div> 

    </div> 
</div> 

하지만 곧 : 크기는

나는이 마크 업을 (12 개 행을 만든다) 열 (행 타블렛 모드)로 제공됩니다.

감사

+0

안녕하세요, 아래 답변 중 하나를 찾고 계셨습니까? – Quince

+0

안녕하세요. 그들 모두는 정확합니다. 그러나 나는 위의 질문을하기 전에 그것들을 사용했다. 내가 필요한 것은 760px보다 작은 장치에 대해 col-xs- *를 작은 섹션 (더 많은 미디어 쿼리)으로 나눌 수있는 "무언가"였습니다. 나는 col-xs- *에 더 많은 크기를 추가하기 위해 Javascript (미디어 쿼리 대신)를 사용했지만, –

답변

4

사용을 이런 식으로 뭔가 각 사업부

2

에 대한

<div class="col-xs-12 col-sm-4 col-md-1"></div> 

?

<div class='container'> 
    <div class='row'> 
     <div class='col-sm-12 col-md-4 col-lg-1'>1</div> 
     <div class='col-sm-12 col-md-4 col-lg-1'>2</div> 
     <div class='col-sm-12 col-md-4 col-lg-1'>3</div> 
     <div class='col-sm-12 col-md-4 col-lg-1'>4</div> 
     <div class='col-sm-12 col-md-4 col-lg-1'>5</div> 
     <div class='col-sm-12 col-md-4 col-lg-1'>6</div> 
     <div class='col-sm-12 col-md-4 col-lg-1'>7</div> 
     <div class='col-sm-12 col-md-4 col-lg-1'>8</div> 
     <div class='col-sm-12 col-md-4 col-lg-1'>9</div> 
     <div class='col-sm-12 col-md-4 col-lg-1'>10</div> 
     <div class='col-sm-12 col-md-4 col-lg-1'>11</div> 
     <div class='col-sm-12 col-md-4 col-lg-1'>12</div> 
    </div> 
</div> 

http://jsfiddle.net/leighking2/bkxj7772/

1
<div class='container'> 
    <div class='row'> 

<div class='col-md-1 col-sm-3 col-xs-12'></div> 
<div class='col-md-1 col-sm-3 col-xs-12'></div> 
<div class='col-md-1 col-sm-3 col-xs-12'></div> 
<div class='col-md-1 col-sm-3 col-xs-12'></div> 

<div class='col-md-1 col-sm-3 col-xs-12'></div> 
<div class='col-md-1 col-sm-3 col-xs-12'></div> 
<div class='col-md-1 col-sm-3 col-xs-12'></div> 
<div class='col-md-1 col-sm-3 col-xs-12'></div> 

<div class='col-md-1 col-sm-3 col-xs-12'></div> 
<div class='col-md-1 col-sm-3 col-xs-12'></div> 
<div class='col-md-1 col-sm-3 col-xs-12'></div> 
<div class='col-md-1 col-sm-3 col-xs-12'></div> 

    </div> 
</div> 
2

당신은이 작업을 수행 할 수 있습니다 (이 변경보고 미리보기의 너비를 조정) ..

<div class="container"> 
    <div class="row"> 
    <div class="col-sm-4 col-md-1">x</div> 
    <div class="col-sm-4 col-md-1">x</div> 
    <div class="col-sm-4 col-md-1">x</div> 
    <div class="col-sm-4 col-md-1">x</div> 
    <div class="col-sm-4 col-md-1">x</div> 
    <div class="col-sm-4 col-md-1">x</div> 
    <div class="col-sm-4 col-md-1">x</div> 
    <div class="col-sm-4 col-md-1">x</div> 
    <div class="col-sm-4 col-md-1">x</div> 
    <div class="col-sm-4 col-md-1">x</div> 
    <div class="col-sm-4 col-md-1">x</div> 
    <div class="col-sm-4 col-md-1">x</div> 
    </div> 
</div> 

http://www.bootply.com/oSLoSE9saE

공지 사항 당신이 필요하지 않습니다 col-xs-12 부트 스트랩은 기본적으로 가장 작은 장치 (ph 예)

관련 문제