부트 스트랩 - 이미지 갤러리의 후크

Question

저는이 사이트 (http://cee.cgreen.ca/index.php?page=designs) (이 프로토 타입 임)와 함께 작업 해 왔지만 부트 스트랩은 언제나 어색한 것처럼 보입니다. 항상 제품을 하나의 행으로 잡아 당기는 행크가 있습니다. 알아낼 수 없습니다. ; -;

// HTML 
<div id="products"> 
    <div class="span4"> //twitter span 
    <div class="product-grid"> //contained image 
    <div class="product-grid-item"> 
    <div class="product-link" title="Pin this!"> 

    <img src="images/designs/shirt.png" class="product-photo"> 

    <div class="over-wrapper" style="opacity: 0; display: block;"></div> 
    <div class="over-content" style="opacity: 0; display: block;"><br><br><br> 

    <a href="link" data-pin-do="buttonPin" data-pin-config="none" target="_blank"> 
    <img src="images/pinthis.png" style="margin:auto;"></a> 

    </div></div></div></div></div> 

/** CSS **/ 
#products { 
    text-align: center; 
    color: #999999; 
    text-decoration: none; 
    font: 12px "proxima-nova"; 
    margin-left:auto; 
    margin-right:auto; 
    max-width:100%; 
} 

.product-grid{ 
    color: #666666; 
    margin:10px; 
} 

.generated-height .product-grid-item { 
    width: 177px; 
    position: absolute; 

    bottom: 0; 

    } 

.product-grid img{ 
    display: block; 
    margin: 0 auto; 
    } 

.product-grid a{ 
    text-decoration: none; 
    display: block; 
    color: #333333; 

    } 

.product-grid .product-link{ 
    display: block; 
    position: relative; 
    z-index: 1; 
    text-decoration: none; 
    margin: 0; 
    min-height: 50px; 
    /* for ie6: */ 
    width: 100%; 
    } 

.product-grid .product-link .over{ 

    position: Absolute;  
    top: 0; 
    left: 0; 
    display: none; 
} 

.product-photo{ 
    max-width: 100%; 
} 
.ie6 .product-grid{ overflow: hidden; } 

.span4 { 
    width: 300px; 
} 

.row-fluid .span4 { 
    width: 31.91489%; 
    *width: 31.8617%; 
} 

Answer 1

제품 섹션의 경우 각 행에 6 개의 span4가 있습니다.

스팬은 각 행에서 12까지 추가, 각각의 행에 대해 3 span4s로 변경하고, 사용자 정의 CSS

.span4 { 
width: 300px; 
}