bootstrap3缩略图网格

我找到一个关于引导网格的教程，但它是用bootstrap1.x编写的。现在我想使用bootstrap3来达到同样的效果。该文档说使用.img-thumbnail而不是.media-grid，但它似乎仍然无法正常工作。我想是这样的： enter image description here bootstrap3缩略图网格

1.x的版本是：

<ul class="media-grid"> 
      <li> 
       <a href="#"> 
        <img src="http://placehold.it/290x200" /> 
       </a> 
      </li> 
      <li> 
       <a href="#"> 
        <img src="http://placehold.it/290x200" /> 

       </a> 
      </li> 
      <li> 
       <a href="#"> 
        <img src="http://placehold.it/290x200" /> 
       </a> 
      </li> 

    <!-- row of 4 thumbnails --> 
      <li> 
       <a href="#"> 
        <img src="http://placehold.it/210x140" /> 
       </a> 
      </li> 
      <li> 
       <a href="#"> 
        <img src="http://placehold.it/210x140" /> 
       </a> 
      </li> 
      <li> 
       <a href="#"> 
        <img src="http://placehold.it/210x140" /> 
       </a> 
      </li> 
      <li> 
       <a href="#"> 
        <img src="http://placehold.it/210x140" /> 
       </a> 
      </li>  

     </ul><!-- end media-grid -->

来源

2013-09-22 jason

使他们获得圆润的边框风格.img-thumbnail类用于图像，它不是.media-grid的直接替代品，如果你想要图像被包装在一个链接中，那么你最好使用链接本身的.thumbnail类作为described here。

要建立你需要使用引导3的new grid system实际的网格，你的榜样应该是这样的：

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-4"> 
      <a href="#" class="thumbnail"> 
      <img src="http://placehold.it/400x200" alt="..." /> 
      </a> 
     </div> 
     <div class="col-xs-4"> 
      <a href="#" class="thumbnail"> 
      <img src="http://placehold.it/400x200" alt="..." /> 
      </a> 
     </div> 
     <div class="col-xs-4"> 
      <a href="#" class="thumbnail"> 
      <img src="http://placehold.it/400x200" alt="..." /> 
      </a> 
     </div> 
     <div class="col-xs-3"> 
      <a href="#" class="thumbnail"> 
      <img src="http://placehold.it/300x150" alt="..." /> 
      </a> 
     </div> 
      <div class="col-xs-3"> 
      <a href="#" class="thumbnail"> 
      <img src="http://placehold.it/300x150" alt="..." /> 
      </a> 
     </div> 
     <div class="col-xs-3"> 
      <a href="#" class="thumbnail"> 
      <img src="http://placehold.it/300x150" alt="..." /> 
      </a> 
     </div> 
     <div class="col-xs-3"> 
      <a href="#" class="thumbnail"> 
      <img src="http://placehold.it/300x150" alt="..." /> 
      </a> 
     </div> 
    </div> 
</div>

这里有一个demo fiddle

而这里的another fiddle如果你不这样做需要链接，只是缩略图网格

来源

2013-09-22 06:21:27

感谢您的回复。使用div来实现很好，但有可能通过ul元素实现吗？ – jason

@jason是的，看到这个新的小提琴：http://jsfiddle.net/koala_dev/ZQ3sG/4/ –

感谢您的帮助 – jason

<div class="container"> 
<div class="row"> 
    <div class="col-xs-4"> 
     Some Image 
    </div> 
    <div class="col-xs-4"> 
     Some Image 
    </div> 
    <div class="col-xs-4"> 
     Some Image 
    </div> 
    <div class="col-xs-3"> 
     Some Image 
    </div> 
    <div class="col-xs-3"> 
     Some Image 
    </div> 
    <div class="col-xs-3"> 
     Some Image 
    </div> 
    <div class="col-xs-3"> 
     Some Image 
    </div> 
</div>

来源

2016-12-17 08:08:25 wali

bootstrap3缩略图网格

回答

相关问题