jquery - 如何避免 Bootstrap 缩略图溢出？

Question

我正在使用 bootstrap 2.3.2

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

我的代码是

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

希望这能让您更好地设置缩略图库的格式。

-干杯