列在引導在Firefox不響應與浮動：無

我試圖居中像這樣的引導使用CS 3列的內容：列在引導在Firefox不響應與浮動：無

.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 請幫忙

來源

2013-10-08 user2820547

使用網格系統時的＃1規則 - 不要修改BASE GRID CSS。 .row不是引導程序中的表格，所以不要在CSS中將其設置爲「display：table」。你發佈的CSS有一百個錯誤，所以修復它的最簡單的方法就是按照它的意圖使用Bootstrap--而不是通過修改它的CSS，而是使用它的類。 – Adam

'文本對齊：中心'刪除'浮動' – Jacques

我不知道哪個引導程序的默認類將垂直居中我的文本。 – user2820547

像亞當說的那樣，不要修改網格。只需在你的col div中放置一個div，並給它顯示：table，height：100％，在那裏放置另一個帶顯示的div：table-cell和vertical-align：middle。

來源

2013-10-08 13:42:24

我知道我不應該修改網格。我嘗試了一些嵌套在div div內的div，但它根本不起作用 – user2820547

通過添加 .img-responsive {width：100％; } 大概修改網格並不是最好的方法，但它工作正常！ – user2820547

列在引導在Firefox不響應與浮動：無

回答

相關問題