谷歌浏览器错误地显示bootstrap .thumbnail图像溢出容器

Question

此问题与Why are the images no wider than 500px in Chrome?

有关

请参阅http://abmphotography.beta.cjbm.net/aileen-kevin

现在已经修复了，但现在当页面最初加载到Chrome时，更宽的图像会溢出div.thumbnail容器。参见：

奇怪的是，如果您打开检查员，请专注于＆lt; html＆gt;或者任何内容，问题立即纠正自己。此外，如果你打开控制台并评估“$（'body'）”它会立即纠正（这在javascript文件中不起作用）。

此外，如果您将浏览器的大小调整为高于或低于宽度：980px，那么它也会自行更正（这是媒体查询切换的点，以及li更改之间的填充。

更新

我使用以下jQuery解决了这个问题：

$('ul.thumbnails img').each(function() {
  $(this).closest('li').width($(this).width());
});

但是我欢迎纯CSS解决方案。

Answer 1

您没有使用行和跨度类的任何特殊原因？我想我的窗户外面也有我的div溢出，但立即注意到我没有使用那些。我对一行内容的结构通常如下所示：

<div class="row">
  <div class="span12">
    <h1>Some Heading</h1>
    <p>Some content</p>
  </div>
</div>

span12可以是您想要的任何尺寸。由于它是12列网格，因此12将使用网格的整个宽度。这可能不一定能解决你的问题，那么也许它会！无论哪种方式，这只是一般的好习惯。