如何避免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缩略图图像溢出？

回答

相关问题