Question

我很难使用Fotorama和Bootstrap制作响应式网站。我花了一天时间才发现出了什么问题，我希望有人可以帮我找到解决问题的方法。

我有一个简单的Bootstrap布局与Fotorama（fotorama.io）库，设置为响应（数据宽度= 100％）。图库设置为显示缩略图。

一切正常，直到我将浏览器（IE或Chrome，同样的结果）调整为＆＃34; XS＆＃34;引导程序大小并重新加载页面。

此时，Fotorama图片以巨大的尺寸显示，导致出现水平滚动条。只要我将页面调整为＆＃34; SM＆＃34;尺寸Fotorama工作正常。如果我重新回到＆＃34; XS＆＃34;事情还算不错。

换句话说，只有当页面最初加载在＆＃34; XS＆＃34;大小问题出现，否则一切都很好。

我已经跟踪问题，发现如果我为缩略图设置一个小尺寸（20像素或更少）或者我只加载几张图片（10张图片而不是我通常会加载的30张图片）页面正常工作即使在＆＃34; XS＆＃34;也很好。

如何纠正？如果它无法纠正，任何人都可以建议一种方式来显示＆＃34; iphone dot＆＃34; at＆＃34; XS＆＃34;分辨率和缩略图分辨率更高？

非常感谢你的帮助！

Answer 1

问题在于您使用display: table-row;和display: table;。如果删除它们，您的照片就可以正常工作。我不知道您为什么使用包装器，包装器外部和包装-内。为什么不使用Bootstraps容器或容器流体？

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

嗯，我花了一段时间才弄明白 - 实际上是一段疯狂的时间。所以这可能对其他人有用。

如果你想让事情按预期工作，你必须放一个＆＃34; table-layout：fixed＆＃34;在CSS中：

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

如https://jsfiddle.net/Lxwthuxc/2/

所示

将页面宽度一次性修复为CSS表格第一行（在本例中为标题）的宽度，并防止浏览器在计算时做出错误的决定包含fotorama的div的宽度（或者浏览器可以正确显示，但结果看起来错了）。

Fotorama缩略图使用Bootstrap

2 个答案: