0
我在Firefox中遇到Bootstrap問題。我的列在Chrome，Opera和Safari中正確設置，但不在Firefox中。Firefox中的引導列顯示不同
我創建了十個分佈在兩行的盒子。每排五個。除了名爲.categoria的課程外，這些框還有課程.col-sm-2和.col-xs-10。
<div class="container categorias">
<div class="row">
<div class="col-xs-offset-1">
<div class="categoria col-sm-2 col-xs-10">
<img src="img/corneta.png" alt="corneta">
<p>Novidades</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/contribua.png" alt="contribua">
<p>Contribua</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/nota.png" alt="nota">
<p>Sua Nota é Um Show</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/parceiros.png" alt="parceiros">
<p>Parceiros</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/projetos.png" alt="projetos">
<p>Projetos</p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-offset-1">
<div class="categoria col-sm-2 col-xs-10">
<img src="img/historico.png" alt="historico">
<p>Histórico</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/objetivos.png" alt="objetivos">
<p>Objetivo, Missão, <br> Valores</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/relatorios.png" alt="balancetes">
<p>Balancetes</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/diretoria.png" alt="diretoria">
<p>Diretoria</p>
</div>
<div class="categoria col-sm-2 col-xs-10">
<img src="img/estatuto.png" alt="estatuto">
<p>Estatuto</p>
</div>
</div>
</div>
</div>
在Chrome中，Opera和Safari，它們正確顯示：
但在Firefox，它是完全不規則的。
請注意，我使用jQuery設置這些箱子最大高度，使他們永遠不會有高度大於寬度更大。我用下面的代碼：
$(document).ready(function(){
var columnWidth = $('.categoria').innerWidth();
$('.categoria').css('max-height', columnWidth);
});
這裏是CSS：
.categoria{
transition: background-color 0.5s linear, box-shadow 0.5s linear;
background-color: #76C6C5;
height: 140px;
margin-left: 1%;
margin-right:1%;
margin-bottom: 20px;
text-align: center;
cursor: pointer;
display: table;
}
.categoria img{
padding-top: 15%;
height: 50%;
display:block;
margin-left: auto;
margin-right: auto;
}
.categoria.col-sm-2 > p{
font-size: 14px;
padding-top: 10px;
}
@media(max-width: 768px){
.categoria{
vertical-align: middle;
height: 8em;
}
.categoria.col-sm-2 > p{
font-size: 1.5em;
display: table-cell;
vertical-align: middle;
}
.categoria img{
display: none;
}
}
.col-xs-offset-1{
padding-left: 15px;
}
說實話，我甚至不知道這是否是引導的問題。但我不知道還有甚麼可能。
看起來像在Firefox盒子的尺寸由寬度和高度設定的形象？ – matmik
這並沒有解決你的身高問題，但你不應該把'padding'應用到'.col-xs-offset-1'上，因爲偏移量已經依賴於填充/邊距了。您可以通過簡單地將col-xs-offset-1添加到每行的第一列來避免將列包裝在同一個類中。推/偏移設計用於列大小，而不是作爲包裝。 –
@RobertC，謝謝。我會調整。 – EGS