如何避免Bootstrap缩略图溢出？

Question

我正在使用 bootstrap 2.3.2

我添加了一个带有灯箱插件的缩略图。但是，缩略图从框架溢出，看起来很奇怪。 当我删除类'thumbnail'看起来没问题。但此时，灯箱不起作用。

我的代码是

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

Answer 1

所以我一直在使用他们的开发者工具在IE11中玩你的网站，我相信我找到了你的问题的答案。你的CSS样式填充.main_content img设置为0px。由于我没有使用实际的CSS文件进行调试，这可能是因为从另一个元素继承了一个样式。无论哪种方式，如果你设置你的图像填充0，你应该是更好的形状。我注意到你的左右边距似乎仍然略有不同。

.main_content img {
    padding: 0px;
}

希望这可以让您更好地格式化缩略图库。

-Cheers