Bootstrap - 圖像庫中的掛鉤

-3

所以我一直在使用這個網站（http://cee.cgreen.ca/index.php?page=designs）（這是一個原型），但bootstrap總是看起來不整潔。總是有一些鉤子將產品吸引到自己的行中，我似乎無法弄清楚。 ; - ;Bootstrap - 圖像庫中的掛鉤

// 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%; 
}

來源

2013-07-22 Cee

請註明究竟是什麼問題，什麼是理想的結果做了。 – feitla

我想你也想加載'bootstrap-responsive.css'。你需要在你達到12的總跨度後關閉你的行（在你的html中放置註釋'row 2'） – Pevara

引導程序通過index.php頁面加載（responsive.css），其中所有跨度都是那裏等等。我有這個問題的照片。它就像是行很完美，每五行都有一個故障。例如： http://img541.imageshack.us/img541/9850/iu7i.jpg 我試過12排的東西。沒有工作！ – Cee

對於產品部分，每行有6個span4s。

跨度應添加最多12個各行中，所以將其更改爲3個span4s的每一行，並與您的自定義CSS

.span4 { 
width: 300px; 
}

來源

2013-07-23 00:28:08

Bootstrap - 圖像庫中的掛鉤

回答

相關問題