html - Bootstrap 中的列在带有 float : none 的 Firefox 中没有响应

Question

我正在尝试使用这样的 cs 在 bootstrap 3 中将列的内容居中:

.row{
padding: 40px 0px;
width: 100%;
min-height: 100%;
display:table;
height: 100%;
position:relative;

}


@media (min-width: 1200px)
{
.col-lg-6,
.col-lg-4,
.col-lg-8 {
display: table-cell;
vertical-align:middle;
float: none;
}

}

@media (min-width: 992px)
{
.col-md-6, 
.col-md-4, 
.col-md-8 {
float: none; 
display: table-cell;
vertical-align:middle;

}
}

HTML

<div class="fill">      

<div class="row" id="section-0">

<div class="col-lg-6 col-md-6">
<h1>Webtoaster</h1>
<p>some text  </p> 
</div>
<div class="col-lg-6 col-md-6">
<img src="img/koko.png" class="img-responsive" alt="Responsive image">
</div>
</div>
<div class="row" id="section-1">
<div class="col-lg-4">
<h1>Heading</h1>
<p>some text</p>
</div>
<div class="col-lg-8"><img src="img/fista.png" class="img-responsive" >
</div>
</div>  

上面的代码确实垂直居中，但在 Firefox 中，我的图像不再响应，并且不会在调整窗口大小时缩放。 它确实在 chrome 和 Safari 中调整大小但是当我调整到一个非常小的屏幕时它不会将图像放在文本下面。这个问题是由 float: none; 引起的如果我评论它，所有响应都很好。 此处的页面示例:http://jajko.byethost16.com 请帮忙

Answer 1

就像亚当说的，不要修改网格。只需在您的 col div 中放置一个 div 并为其提供 display: table, height: 100% 并在其中放置另一个带有 display: table-cell 和 vertical-align: middle 的 div。