Twitter bootstrap 引导3个等高行在我们的站点上不能100%工作

Twitter bootstrap 引导3个等高行在我们的站点上不能100%工作,twitter-bootstrap,equal-heights,Twitter Bootstrap,Equal Heights,我们几乎已经完成了基于Bootstrap3的web站点的开发,但是在需要显示由缩略图和文本组成的列时,它们并不总是正确地包装和对齐。它可以在Chrome和Safari上运行,但在Firefox上并不是100%都可以运行,而且我们几乎没有什么想法了 我们正在使用CSS Tricks()中的脚本将行设置为等高 描述正在发生的事情的最好方法是让你自己看看。一个很好的例子是 将视图设置为“设置”以显示所有产品,并将显示器设置为“多媒体资料”视图 在页面加载时,脚本(“columnConform”)应将i

我们几乎已经完成了基于Bootstrap3的web站点的开发,但是在需要显示由缩略图和文本组成的列时,它们并不总是正确地包装和对齐。它可以在Chrome和Safari上运行,但在Firefox上并不是100%都可以运行,而且我们几乎没有什么想法了

我们正在使用CSS Tricks()中的脚本将行设置为等高

描述正在发生的事情的最好方法是让你自己看看。一个很好的例子是

将视图设置为“设置”以显示所有产品,并将显示器设置为“多媒体资料”视图

在页面加载时,脚本(“columnConform”)应将id为“page wrap”的列的高度设置为等于每行中最高的列的高度。它并不总是100%做到这一点

如果调整窗口大小,脚本将再次被触发,并且这次通常工作得更好,尽管在Firefox中不是100%

设置等高的脚本代码如下(在我们的网站上的文件thumbnail row fix.js中):

//这些是(ruh-roh)globals。你可以把它包起来
//如果您想。。。
var=0,
currentRowStart=0,
rowDivs=新数组();
功能设置符合高度(el,新高度){
//将高度设置为新的高度,但记住原始高度以防发生变化
高程数据(“原始高度”),(高程数据(“原始高度”)==未定义)?(高程()):(高程数据(“原始高度”));
标高高度(新高度);
}
函数原始高度(el){
//如果高度已更改,请发送原始高度
返回(el.data(“原始高度”)==未定义)?(el.height()):(el.data(“原始高度”));
}
函数columnConform(){
//找到行中最高的DIV,并将所有DIV的高度设置为与之匹配。
$('#换页>div')。每个(函数(){
//“缓存”
var$el=$(本);
var topPosition=$el.position().top;
if(currentRowStart!=topPosition){
//我们刚来到一个新的一排。在完成的一排上设置所有的高度
对于(currentDiv=0;currentDiv
假定window.onload或$(window.load)是相同的,并且在加载DOM和所有图像时触发。如果是这样,我无法解释为什么在Firefox中加载页面时脚本的工作方式与调整窗口大小时脚本的工作方式不同

也许这是Firefox最新版本中的一个bug,但我在论坛上看不到任何相关内容

如果您有任何想法、建议和方法可以尝试让这项工作顺利进行,我们将不胜感激。 我希望我对此进行了充分的解释,显示页面应该会引发问题。

我(目前)不得不放弃寻找这个问题的理想解决方案,但已经设法找到了一个至少有效的解决方案

“columnConform”脚本通过将行中所有列的高度(即:从页面顶部的偏移量相同)设置为行中最高列的高度来工作

不幸的是,如果列的高度足够不等,它们就不会输出到正确的行中的页面,因此此脚本无法解决此问题

一个微小的更改会使脚本认为所有列与页面顶部的偏移量都为0,因此它们都位于同一行中,并且都具有最高列的高度

如果没有一列比其他列高得多,这不是问题。幸运的是,在我们的大多数页面上,这样做只会导致行之间的空白比我们希望的要多一些

代码更改如下:

   // var topPosition = $el.position().top;
      var topPosition = 0;  

一种方法是在引导行中使用display:table cell。它有点脏,但通常运行良好。有几种方法可以做到这一点。而且.JS/jQuery可能会出现错误和不可靠。如果您只有IE 9+支持,那么您就可以使用。感谢提示。由于table cell和Pseudo元素似乎都希望rk,列位于单行上。我们的列定义为单行,需要浮动到多行上,3或4(或1)每行根据窗口大小而定。刚刚更新到Firefox 31.0,不幸的是,这似乎没有什么区别。行正确对齐,直到你到达页面的大部分位置,然后有一整行空格没有正确包装。你所能做的有限,因为列必须保持响应除了编写一个脚本来检查窗口大小、确定每行的列数并在需要的地方插入“clearfix”类之外,我想不出如何进一步操作。所以关闭一个