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

如何使用现有的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>

Answer 2

快速方式，使用占位符图片：

＆＃13;

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

＆＃13;

创建图库引导程序

2 个答案: