代码之家 › 专栏 › 技术社区 › SNaRe

如何避免引导程序缩略图溢出?

xhtml twitter-bootstrap css jquery

SNaRe · 技术社区 · 12 年前

我正在使用 引导2.3.2

我添加了一个带有灯箱插件的缩略图。然而,缩略图从框架溢出,看起来很奇怪。 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>

1 回复 | 直到 12 年前

JeffreDodd 12 年前

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

.main_content img {
    padding: 0px;
}

希望这能让你在一个更好的地方格式化你的缩略图库。

-干杯