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

Question

我正在使用引导程序 2.3.2

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

我的代码是

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

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

-干杯