創建圖庫引導

Question

我想顯示一種圖庫類型，每行最多兩個圖像，每個圖像下方都有一個圖像描述，我需要它是響應式的，我不是專家的引導程序，這個是我的代碼：

<div class="container"> 
<div class="row">   
     <div class="col-md-6"> <a href="/Apps/Online" > <img src="~/images/aviation.jpg" style="max-height:300px;max-width:300px;" class="img-responsive" /> Aviation</a></div> 
     <div class="col-md-6"> <a href="/Apps/Printable" > <img src="~/images/International_photo.jpg" style="max-height:300px;max-width:300px;" class="img-responsive" /> International</a></div> 
     <div class="col-md-6"> <a href="/Apps/Online"> <img src="~/images/ship.jpg" style="max-height:300px;max-width:300px;" class="img-responsive" /> Marine</a> </div> 
     <div class="col-md-6"> <a href="/Apps/Printable" > <img src="~/images/longshore.jpg" style="max-height:300px;max-width:300px;" class="img-responsive" /> WC/Longshore</a> </div>  
</div> 

有了上面的代碼我得到不同大小的圖像，他們沒有組織 我想一些響應dessign這樣的：

image     image 
    name_of_image   name_of_image 

    image     image 
    name_of_image   name_of_image 

Answer 1

如何使用現有的縮略圖類？ http://getbootstrap.com/components/#thumbnails-custom-content

<div class="row"> 
    <div class="col-md-6"> 
    <div class="thumbnail"> 
     <img src="..." alt="..."> 
     <div class="caption"> 
     Text here 
     </div> 
    </div> 
    </div> 
    <div class="col-md-6"> 
    <div class="thumbnail"> 
     <img src="..." alt="..."> 
     <div class="caption"> 
     Text here 
     </div> 
    </div> 
    </div> 
</div> 

Answer 2

快速的方式，用佔位符圖片：

<div class="container"> 
 
    <div class="row">   
 
    <div class="col-md-6" style="float:left;"> 
 
     <a href="/Apps/Online" > 
 
     <img src="http://placehold.it/300" style="max-height:300px;max-width:300px;" class="img-responsive" /> 
 
     <div> 
 
     Aviation 
 
     </div> 
 
     </a> 
 
    </div> 
 
    
 
    <div class="col-md-6"> 
 
     <a href="/Apps/Online" > 
 
     <img src="http://placehold.it/300" style="max-height:300px;max-width:300px;" class="img-responsive" /> 
 
     <div> 
 
     Aviation 
 
     </div> 
 
     </a> 
 
    </div> 
 
    <div class="col-md-6" style="float:left;"> 
 
     <a href="/Apps/Online" > 
 
     <img src="http://placehold.it/300" style="max-height:300px;max-width:300px;" class="img-responsive" /> 
 
     <div> 
 
     Aviation 
 
     </div> 
 
     </a> 
 
    </div> 
 
    
 
    <div class="col-md-6"> 
 
     <a href="/Apps/Online" > 
 
     <img src="http://placehold.it/300" style="max-height:300px;max-width:300px;" class="img-responsive" /> 
 
     <div> 
 
     Aviation 
 
     </div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>