Bootstrap網格庫結構修正

Question

我想修復我的bootstrap圖像網格，但我認爲我的整個結構是錯誤的。任何線索我的錯誤在哪裏？以下是圖片庫應該如何的最終圖片。

這裏是我的代碼至今

.image-gallery { 
 
    margin-bottom: 81px; 
 
} 
 
.space { 
 
    margin-bottom: 30px; 
 
} 
 
.image-overlay { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.image-overlay .front-overlay { 
 
    background: rgba(139, 197, 65, 0.65); 
 
    position: absolute; 
 
    top: 0; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    border-radius: 5px; 
 
} 
 
.image-overlay .front-overlay p, 
 
.image-overlay .back-overlay h3 { 
 
    font-family: "Questrial", sans-serif; 
 
    font-size: 24px; 
 
    color: #fff; 
 
    text-align: center; 
 
} 
 
.image-overlay .back-overlay p { 
 
    font-family: "Raleway-Regular", sans-serif; 
 
    font-size: 14px; 
 
    line-height: 24px; 
 
    text-align: center; 
 
    color: #fff; 
 
} 
 
.image-overlay .back-overlay { 
 
    visibility: hidden; 
 
    position: absolute; 
 
    top: 25%; 
 
    left: 10%; 
 
    right: 10%; 
 
    bottom: 0; 
 
} 
 
.image-overlay:hover .back-overlay { 
 
    visibility: visible; 
 
} 
 
.image-overlay:hover .front-overlay { 
 
    visibility: hidden; 
 
} 
 
.image-gallery .image-overlay .front-overlay { 
 
    visibility: hidden; 
 
} 
 
/* index page front overlay is hidden */ 
 

 
.image-gallery .image-overlay .back-overlay p { 
 
    font-family: "Questrial", sans-serif; 
 
    font-size: 24px; 
 
    letter-spacing: 0.4px; 
 
    margin: 15px 0 30px 0; 
 
} 
 
.master-image-gallery .image-overlay .back-overlay { 
 
    top: 0; 
 
} 
 
.master-image-gallery .image-overlay .front-overlay {} .btn-link { 
 
    min-width: 165px; 
 
    background: transparent; 
 
    border: 2px solid #8bc541; 
 
    color: #8bc541; 
 
    text-decoration: none; 
 
    font-family: "Raleway-Bold", sans-serif; 
 
    font-size: 13px; 
 
} 
 
.btn-link:hover { 
 
    background: transparent; 
 
    border: 2px solid #fff; 
 
    color: #fff; 
 
    text-decoration: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<div class="image-gallery"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-4 col-sm-4"> 
 
     <div class="row"> 
 
      <div class="col-md-12 col-sm-4 space"> 
 
      <a href="#" target="_blank" class="image-overlay"> 
 
       <img src="https://s12.postimg.org/b4vl9oxfd/product_1.jpg" width="360" height="243" title="someText" alt="someText"> 
 
       <div class="front-overlay"></div> 
 
       <!-- front-overlay --> 
 
       <div class="back-overlay"> 
 
       <p>Evaporative Coolers</p> 
 
       <button type="button" class="btn btn-link center-block">shop this collection</button> 
 
       </div> 
 
       <!-- back-overlay --> 
 
      </a> 
 
      <!-- image --> 
 
      </div> 
 
      <div class="col-md-12"> 
 
      <a href="#" target="_blank" class="image-overlay"> 
 
       <img src="https://s12.postimg.org/6o38b0j7d/product_7.jpg" width="750" height="243" title="someText" alt="someText"> 
 
       <div class="front-overlay"></div> 
 
       <!-- front-overlay --> 
 
       <div class="back-overlay"> 
 
       <p>Evaporative Coolers</p> 
 
       <button type="button" class="btn btn-link center-block">shop this collection</button> 
 
       </div> 
 
       <!-- back-overlay --> 
 
      </a> 
 
      <!-- image --> 
 
      </div> 
 
     </div> 
 
     <!-- row --> 
 
     </div> 
 
     <!-- col-md-4 col-sm-4 --> 
 
     <div class="col-md-4 col-sm-4"> 
 
     <div class="row"> 
 
      <div class="col-md-12"> 
 
      <a href="#" target="_blank" class="image-overlay"> 
 
       <img src="https://s12.postimg.org/rh5mzfbqx/product_2.jpg" width="360" height="243" title="someText" alt="someText"> 
 
       <div class="front-overlay"></div> 
 
       <!-- front-overlay --> 
 
       <div class="back-overlay"> 
 
       <p>Evaporative Coolers</p> 
 
       <button type="button" class="btn btn-link center-block">shop this collection</button> 
 
       </div> 
 
       <!-- back-overlay --> 
 
      </a> 
 
      <!-- image --> 
 
      </div> 
 

 
     </div> 
 
     </div> 
 
     <!-- col-md-4 col-sm-4 --> 
 
     <div class="col-md-4 col-sm-4"> 
 
     <div class="row"> 
 
      <div class="col-md-12"> 
 
      <a href="#" target="_blank" class="image-overlay"> 
 
       <div class="extra-margin"> 
 
       <img src="https://s12.postimg.org/68ryhzxa1/product_5.jpg" width="360" height="518" title="someText" alt="someText"> 
 
       </div> 
 
       <div class="front-overlay"></div> 
 
       <!-- front-overlay --> 
 
       <div class="back-overlay"> 
 
       <p>Evaporative Coolers</p> 
 
       <button type="button" class="btn btn-link center-block">shop this collection</button> 
 
       </div> 
 
       <!-- back-overlay --> 
 
      </a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <!-- col-md-4 col-sm-4 --> 
 
    </div> 
 
    <!-- row --> 
 
    </div> 
 
    <!-- container --> 
 
</div> 
 
<!-- image-gallery -->

這裏是我的代碼懸停效果好，但我擔心的HTML結構，我認爲我的行列數在創建一個錯誤的方式。

Answer 1

重新排列DIV圖像，併爲一個圖像，你給更多的寬度..檢查以下片斷導致整頁..

.image-gallery { 
 
    margin-bottom: 81px; 
 
} 
 
.space { 
 
    margin-bottom: 30px; 
 
} 
 
.image-overlay { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.image-overlay .front-overlay { 
 
    background: rgba(139, 197, 65, 0.65); 
 
    position: absolute; 
 
    top: 0; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    border-radius: 5px; 
 
} 
 
.image-overlay .front-overlay p, 
 
.image-overlay .back-overlay h3 { 
 
    font-family: "Questrial", sans-serif; 
 
    font-size: 24px; 
 
    color: #fff; 
 
    text-align: center; 
 
} 
 
.image-overlay .back-overlay p { 
 
    font-family: "Raleway-Regular", sans-serif; 
 
    font-size: 14px; 
 
    line-height: 24px; 
 
    text-align: center; 
 
    color: #fff; 
 
} 
 
.image-overlay .back-overlay { 
 
    visibility: hidden; 
 
    position: absolute; 
 
    top: 25%; 
 
    left: 10%; 
 
    right: 10%; 
 
    bottom: 0; 
 
} 
 
.image-overlay:hover .back-overlay { 
 
    visibility: visible; 
 
} 
 
.image-overlay:hover .front-overlay { 
 
    visibility: hidden; 
 
} 
 
.image-gallery .image-overlay .front-overlay { 
 
    visibility: hidden; 
 
} 
 
/* index page front overlay is hidden */ 
 

 
.image-gallery .image-overlay .back-overlay p { 
 
    font-family: "Questrial", sans-serif; 
 
    font-size: 24px; 
 
    letter-spacing: 0.4px; 
 
    margin: 15px 0 30px 0; 
 
} 
 
.master-image-gallery .image-overlay .back-overlay { 
 
    top: 0; 
 
} 
 
.master-image-gallery .image-overlay .front-overlay {} .btn-link { 
 
    min-width: 165px; 
 
    background: transparent; 
 
    border: 2px solid #8bc541; 
 
    color: #8bc541; 
 
    text-decoration: none; 
 
    font-family: "Raleway-Bold", sans-serif; 
 
    font-size: 13px; 
 
} 
 
.btn-link:hover { 
 
    background: transparent; 
 
    border: 2px solid #fff; 
 
    color: #fff; 
 
    text-decoration: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<div class="image-gallery"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-4 col-sm-4"> 
 
     <div class="row"> 
 
      <div class="col-md-12 col-sm-4 space"> 
 
      <a href="#" target="_blank" class="image-overlay"> 
 
       <img src="https://s12.postimg.org/b4vl9oxfd/product_1.jpg" width="360" height="243" title="someText" alt="someText"> 
 
       <div class="front-overlay"></div> 
 
       <!-- front-overlay --> 
 
       <div class="back-overlay"> 
 
       <p>Evaporative Coolers</p> 
 
       <button type="button" class="btn btn-link center-block">shop this collection</button> 
 
       </div> 
 
       <!-- back-overlay --> 
 
      </a> 
 
      <!-- image --> 
 
      </div> 
 
      <div class="col-md-12 col-sm-4 space"> 
 
      <a href="#" target="_blank" class="image-overlay"> 
 
       <img src="https://s12.postimg.org/6o38b0j7d/product_7.jpg" width="360" height="243" title="someText" alt="someText"> 
 
       <div class="front-overlay"></div> 
 
       <!-- front-overlay --> 
 
       <div class="back-overlay"> 
 
       <p>Evaporative Coolers</p> 
 
       <button type="button" class="btn btn-link center-block">shop this collection</button> 
 
       </div> 
 
       <!-- back-overlay --> 
 
      </a> 
 
      <!-- image --> 
 
      </div> 
 
     </div> 
 
     <!-- row --> 
 
     </div> 
 
     <!-- col-md-4 col-sm-4 --> 
 
     <div class="col-md-4 col-sm-4"> 
 
     <div class="row"> 
 
\t \t <div class="col-md-12 col-sm-4 space"> 
 
      <a href="#" target="_blank" class="image-overlay"> 
 
       <div class="extra-margin"> 
 
       <img src="https://s12.postimg.org/68ryhzxa1/product_5.jpg" width="360" height="518" title="someText" alt="someText"> 
 
       </div> 
 
       <div class="front-overlay"></div> 
 
       <!-- front-overlay --> 
 
       <div class="back-overlay"> 
 
       <p>Evaporative Coolers</p> 
 
       <button type="button" class="btn btn-link center-block">shop this collection</button> 
 
       </div> 
 
       <!-- back-overlay --> 
 
      </a> 
 
      </div> 
 
      
 

 
     </div> 
 
     </div> 
 
     <!-- col-md-4 col-sm-4 --> 
 
     <div class="col-md-4 col-sm-4"> 
 
     <div class="row"> 
 
     <div class="col-md-12"> 
 
      <a href="#" target="_blank" class="image-overlay"> 
 
       <img src="https://s12.postimg.org/rh5mzfbqx/product_2.jpg" width="360" height="243" title="someText" alt="someText"> 
 
       <div class="front-overlay"></div> 
 
       <!-- front-overlay --> 
 
       <div class="back-overlay"> 
 
       <p>Evaporative Coolers</p> 
 
       <button type="button" class="btn btn-link center-block">shop this collection</button> 
 
       </div> 
 
       <!-- back-overlay --> 
 
      </a> 
 
      <!-- image --> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <!-- col-md-4 col-sm-4 --> 
 
    </div> 
 
    <!-- row --> 
 
    </div> 
 
    <!-- container --> 
 
</div> 
 
<!-- image-gallery -->