如何避免Bootstrap縮略圖圖像溢出？

我正在使用bootstrap 2.3.2如何避免Bootstrap縮略圖圖像溢出？

我添加了一個縮略圖與燈箱addon。但是，縮略圖從框架溢出，看起來很奇怪。 enter image description here 當我刪除類'縮略圖'看起來沒問題。但在這個時候，燈箱不起作用。

我的代碼是

<ul class="thumbnails" data-toggle="lightbox"> 
    <li class="span3"> 
     <a href="http://lorempixel.com/500/500/transport/1/" 
      title="Image #1" data-description="Lorem ipsum dolor" 
      class="thumbnail"> 
      <img src="http://lorempixel.com/250/250/transport/1/" alt=""> 
     </a> 
    </li> 
    <li class="span3"> 
     <a href="http://lorempixel.com/500/500/transport/2/" 
      title="Image #1" data-description="Lorem ipsum dolor" 
      class="thumbnail"> 
      <img src="http://lorempixel.com/250/250/transport/2/" alt=""> 
     </a>  
    </li> 
    <li class="span3"> 
     <a href="http://lorempixel.com/500/500/transport/3/" 
      title="Image #1" data-description="Lorem ipsum dolor" 
      class="thumbnail"> 
      <img src="http://lorempixel.com/250/250/transport/3/" alt=""> 
     </a>  
    </li> 
    <li class="span3"> 
     <a href="http://lorempixel.com/500/500/transport/4/" 
      title="Image #1" data-description="Lorem ipsum dolor" 
      class="thumbnail"> 
      <img src="http://lorempixel.com/250/250/transport/4/" alt=""> 
     </a>  
    </li> 
    <li class="span3"> 
     <a href="http://lorempixel.com/500/500/transport/1/" 
      title="Image #1" data-description="Lorem ipsum dolor" 
      class="thumbnail"> 
      <img src="http://lorempixel.com/250/250/transport/1/" alt=""> 
     </a> 
    </li> 
    <li class="span3"> 
     <a href="http://lorempixel.com/500/500/transport/2/" 
      title="Image #1" data-description="Lorem ipsum dolor" 
      class="thumbnail"> 
      <img src="http://lorempixel.com/250/250/transport/2/" alt=""> 
     </a>  
    </li> 
    <li class="span3"> 
     <a href="http://lorempixel.com/500/500/transport/3/" 
      title="Image #1" data-description="Lorem ipsum dolor" 
      class="thumbnail"> 
      <img src="http://lorempixel.com/250/250/transport/3/" alt=""> 
     </a>  
    </li> 
    <li class="span3"> 
     <a href="http://lorempixel.com/500/500/transport/4/" 
      title="Image #1" data-description="Lorem ipsum dolor" 
      class="thumbnail"> 
      <img src="http://lorempixel.com/250/250/transport/4/" alt=""> 
     </a>  
    </li> 
    <li class="span3"> 
     <a href="http://lorempixel.com/500/500/transport/1/" 
      title="Image #1" data-description="Lorem ipsum dolor" 
      class="thumbnail"> 
      <img src="http://lorempixel.com/250/250/transport/1/" alt=""> 
     </a>  
    </li> 
    <li class="span3"> 
     <a href="http://lorempixel.com/500/500/transport/2/" 
      title="Image #1" data-description="Lorem ipsum dolor" 
      class="thumbnail"> 
      <img src="http://lorempixel.com/250/250/transport/2/" alt=""> 
     </a>  
    </li> 
    <li class="span3"> 
     <a href="http://lorempixel.com/500/500/transport/3/" 
      title="Image #1" data-description="Lorem ipsum dolor" 
      class="thumbnail"> 
      <img src="http://lorempixel.com/250/250/transport/3/" alt=""> 
     </a>  
    </li> 
    <li class="span3"> 
     <a href="http://lorempixel.com/500/500/transport/4/" 
      title="Image #1" data-description="Lorem ipsum dolor" 
      class="thumbnail"> 
      <img src="http://lorempixel.com/250/250/transport/4/" alt=""> 
     </a>  
    </li> 
</ul>

來源

2013-10-19 SNaRe

你可以在你的custom_ss.css中使用.thumbnail img {width：190px} – Manish

所以我一直在使用IE11您網站的開發工具玩弄，我相信我已經找到了答案，你的問題。 on .main_content img將CSS樣式padding設置爲0px。由於我沒有使用實際的CSS文件進行調試，因此可能會從其他元素繼承樣式。無論哪種方式，如果你設置你的圖像填充0，你應該是更好的形狀。我注意到你的左右邊距似乎仍然有些微差別。

.main_content img { 
    padding: 0px; 
}

希望這可以讓你在一個更好的地方格式化縮略圖庫。

-heers

來源

2013-10-19 21:56:02 JeffreDodd

如何避免Bootstrap縮略圖圖像溢出？

回答

相關問題