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縮略圖網格

回答

相關問題