부트 스트랩 v3 축소판 문제

Question

부트 스트랩 v3으로 업그레이드하면서 축소판 이미지에 문제가 발생했습니다.

<div class="row"> 
    <div class="col-sm-6"> 
     <div class="thumbnail"> 
      <!-- content --> 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <div class="thumbnail"> 
      <!-- content --> 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <div class="thumbnail"> 
      <!-- content --> 
     </div> 
    </div> 
</div> 

그리고 여기가 생성하는 것입니다 : 당신이 볼 수 있듯이

은, 왼쪽 축소판 내용으로 인라인되지 않습니다

여기 내 코드입니다.

Answer 1

부트 스트랩은 12 열 그리드를 사용합니다. 3 * 6>12 당신이 서로 옆에 실행하는 데 열을하려는 경우, 당신은 col-sm-4 (4 * 3 = 12)를 사용해야합니다 :

<div class="row"> 
    <div class="col-sm-4"> 
     <div class="thumbnail"> 
      <!-- content --> 
     </div> 
    </div> 
    <div class="col-sm-4"> 
     <div class="thumbnail"> 
      <!-- content --> 
     </div> 
    </div> 
    <div class="col-sm-4"> 
     <div class="thumbnail"> 
      <!-- content --> 
     </div> 
    </div> 
</div> 

을 다른 방법으로, 각 썸네일을 원하는 경우 6 열을 차지하기 위해 두 행으로 그들을 배치 :

<div class="row"> 
    <div class="col-sm-6"> 
     <div class="thumbnail"> 
      <!-- content --> 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <div class="thumbnail"> 
      <!-- content --> 
     </div> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-sm-4"> 
     <div class="thumbnail"> 
      <!-- content --> 
     </div> 
    </div> 
</div> 

Answer 2

row 클래스를 잘못 사용하고 있습니다. row에는 최대 12 개의 열을 포함 할 수 있습니다. 같은 행에 3 * 6 = 18 개의 열을 추가하고 있습니다.

다른 행을 추가하십시오.

<div class="row"> 
    <div class="col-sm-6"> 
     <div class="thumbnail"> 
      <!-- content --> 
     </div> 
    </div> 
    <div class="col-sm-6"> 
     <div class="thumbnail"> 
      <!-- content --> 
     </div> 
    </div> 
<div class="row"> 
</div> 
    <div class="col-sm-6"> 
     <div class="thumbnail"> 
      <!-- content --> 
     </div> 
    </div> 
</div>