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

Question

这个问题与Why are the images no wider than 500px in Chrome?有关

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

此问题现已修复，但现在当页面最初在 Chrome 中加载时，较宽的图像会溢出其 div.thumbnail 容器。见:

奇怪的是，如果您打开检查器，关注 或其中的任何内容，问题会立即自行纠正。此外，如果您打开控制台并评估“$('body')”，它会立即更正(这在 javascript 文件中不起作用)。

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

更新:

我已经使用以下 jQuery 解决了这个问题:

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

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

Answer 1

您没有使用 row 和 span 类的任何特殊原因？我想我也曾让我的 div 溢出到窗外，但我立即注意到我没有使用它们。我的一行内容结构通常如下所示:

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

span12 可以是您想要的任何大小。因为它是一个 12 列网格，12 将使用网格的整个宽度。这不一定能解决您的问题，但也许会再次解决!无论哪种方式，这都是一般的好习惯。