0
Firefoxのブートストラップに問題があります。私の列はChrome、Opera、Safariでは正しく設定されていますが、Firefoxでは正しく設定されていません。Firefoxでブートストラップカラムの表示が異なる
2つの行に分かれた10個のボックスを作成しました。各行に5つ。これらのボックスは、.categoriaというクラスの他に、クラス.col-sm-2と.col-xs-10を持っています。クローム、オペラとSafariで
<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>
、彼らが正しく表示されます。
しかし、Firefoxで、それは完全に不規則です。
私は、彼らが幅よりも大きな高さを持っていることは決してありませんので、これらのボックスの最大の高さを設定するためにはJQueryを使用しています注意してください。正直に言うと
.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;
}
、私はそれがブートストラップに問題がある場合でも、わからない：
$(document).ready(function(){
var columnWidth = $('.categoria').innerWidth();
$('.categoria').css('max-height', columnWidth);
});
そして、ここでは、CSSです：私は、次のコードを使用して。しかし、私は他に何ができるのか分からない。
ボックスのサイズは、幅と高さによって設定されているFirefoxの上のように見えます画像の？ – matmik
これは高さの問題には対処しませんが、オフセットは既にパディング/マージンに依存しているので、 '.col-xs-offset-1'に' padding'を適用しないでください。各行の最初の列に 'col-xs-offset-1'を追加するだけで、同じクラスの列を折り返さないようにすることができます。プッシュ/オフセットは、ラッパーとしてではなく、列サイジングの横に使用するように設計されています。 –
@RobertC、ありがとう。私はそれを調整するつもりです。 – EGS