html - 创建图库 Bootstrap

Question

我想显示一种画廊，每行最多两张图片，每张图片下面都有图片的描述，我需要它是响应式的，我不是 bootstrap 专家，这是我的代码:

<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>

通过上面的代码，我得到了不同尺寸的图像，但它们没有组织起来 我想要一些像这样的响应式设计:

    image                  image
  name_of_image          name_of_image

     image                  image
  name_of_image          name_of_image

Answer 1

使用现有的 Thumbnail-Class 怎么样？ 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>