Fotorama 缩略图使用 Bootstrap 导致图像在小屏幕上显得很大

Question

我很难使用 Fotorama 和 Bootstrap 制作响应式网站。弄了一天才搞清楚是哪里出了问题，希望有人能帮我想办法解决。

我有一个简单的 Bootstrap 布局，带有 Fotorama (fotorama.io) 图库，设置为响应式 (data-width=100%)。图库设置为显示缩略图。

一切正常，直到我将浏览器（IE 或 Chrome，结果相同）调整为 "XS" Bootstrap 大小并重新加载页面。

此时，Fotorama 图片以巨大的尺寸显示，导致出现水平滚动条。只要我将页面大小调整为 "SM" 大小，Fotorama 就可以正常工作。如果我将大小调整回 "XS"，一切仍然正常。

换句话说，只有当页面最初以 "XS" 大小加载时才会出现问题，否则一切正常。

我追踪到这个问题，发现如果我为缩略图设置一个小尺寸（20 像素或更少）或者我只加载几张图片（10 张图片而不是我通常加载的 30 张）页面即使在 "XS" 也能正常工作。

如何纠正？如果无法更正，谁能建议一种以 "XS" 分辨率显示 "iphone dots" 并以更高分辨率显示缩略图的方法？

非常感谢您的帮助！

Answer 1

问题是您对 display: table-row; 和 display: table; 的使用。如果您删除它们，您的 fotorama 照原样工作 should.I我不确定您为什么使用 wrapper，wrapper-外部和包装内部。为什么不使用 Bootstraps 容器或 container-fluid？

body #wrapper-outer {
height: 100%;
}
body #wrapper-outer #wrapper {

height: 100%;
position: relative;
width: 100%;
}
body #wrapper-outer #wrapper #wrapper-inner {
height: 100%; 
}   
body #wrapper-outer #wrapper #footer-wrapper { 
height: 1px;
}

Answer 2

好吧，我花了一段时间才弄清楚——实际上是一段疯狂的时间。所以也许这对其他人有用。

如果您想让事情按预期工作，您必须在 CSS:

中添加 "table-layout:fixed"

body #wrapper-outer #wrapper {
  display: table;
      table-layout:fixed;  //does it!
  height: 100%;
  position: relative;
  width: 100%;
}

如图所示 https://jsfiddle.net/Lxwthuxc/2/

一劳永逸地将页面宽度固定为 CSS table（在本例中为 header）第一行的宽度，并防止浏览器在计算包含 fotorama 的 div 的宽度时做出错误的决定（或者浏览器可能正确，但结果看起来还是错误的）。

Fotorama 缩略图使用 Bootstrap 导致图像在小屏幕上显得很大

Fotorama thumbnails cause image to appear huge on small screens using Bootstrap

jquery

twitter-bootstrap

twitter-bootstrap-3

fotorama