Question

我的应用程序中有3列，两个薄侧列，中间有一个较粗的列。在移动视图中，我希望中间的一个在顶部，所以我使用了推拉方法。这非常有效。

在大视图中，我希望所有三列都是相同的高度，无论内容如何，所以我使用了table / table-cell显示方法。这也很好，但是阻止了FireFox中的推拉。

我有一个说明问题的bootply： http://www.bootply.com/vHjyM1EtYl

在IE，FF＆amp;铬。你会在FF中看到＆＃34; Mid＆＃34;列在左侧。评论＆＃34;身高＆＃34;类，并看到它再次被拉到正确的位置。

Answer 1

Bootstrap推拉使用float。通过将其设置为none，可以消除推或拉的能力。如果您为该课程添加想要的高度，则不需要float: none。

.col-md-height {
    display: table-cell;
    /*float: none;*/
    vertical-align: top;
    height: 300px;
}

编辑：对于动态高度，您可以使用jQuery而不是float: none。 New Bootply

$(window).resize(function() {
  if($(window).width() >= 1200) {
        $('.col-md-height').css('height', $('.container-md-height').height());
  } else {
        $('.col-md-height').css('height', 'auto');
  }
});

编辑＃2：对于仅CSS解决方案，您可以在3列中添加一个较大的负边距底部和等效的填充底部，然后将容器的溢出设置为隐藏。如果你这样做，你将不需要使用表格或表格单元格显示。

CSS Only Bootply

.col-md-height {
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}
.container-md-height {
    overflow: hidden;
}

Bootstrap列排序Firefox问题

1 个答案: