Question

我在Firefox中遇到Bootstrap问题。我的列在Chrome，Opera和Safari中正确设置，但在Firefox中没有。

我创建了十个分布在两行中的盒子。每排五个。除了名为.col-sm-2的类外，这些方框还有.col-xs-10和.categoria类。

<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中，它们显示正确：

Screenshoot from Chrome

但在Firefox中，它完全不正常。

Screeshoot from Firefox

请注意，我使用JQuery将这些框设置为max-height，因此它们的高度绝不会大于宽度。我使用以下代码：

$(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;
}

说实话，我甚至不确定它是否是Bootstrap的问题。但我不知道还有什么。

Answer 1

尝试使用常量值而不是变量和最大高度属性的使用高度。

$(document).ready( function(){
    // This value v
    var columnWidth = $('.categoria').innerWidth();
    columnWith = constant;    
    // This also change
    $('.categoria').css('height', columnWidth);    
});

如果这没有改变，请检查所有标签是否匹配。当我不关闭标签时，我无法告诉你发生了多少次。希望我能帮忙。

Answer 2

好的，所以你应该只在你不想显示图片时将显示更改为表格:)这似乎可以解决不均匀高度的问题

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: block;
}

.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;
        display:table;
    }

    .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;
}

HTML：

<div class="container categorias">
        <div class="row">
            <div class="col-xs-offset-1">
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="corneta">
                    <p>Novidades</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="contribua">
                    <p>Contribua</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="nota">
                    <p>Sua Nota é Um Show</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="parceiros">
                    <p>Parceiros</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" 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="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="historico">
                    <p>Histórico</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="objetivos">
                    <p>Objetivo, Missão, <br> Valores</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="balancetes">
                    <p>Balancetes</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="diretoria">
                    <p>Diretoria</p>
                </div>
                <div class="categoria col-sm-2 col-xs-10">
                    <img src="http://kids.tate.org.uk/mygallery/kaimage/5140?size=LARGE" alt="estatuto">
                    <p>Estatuto</p>
                </div>
            </div>
        </div>

    </div>

Fiddle

Bootstrap列在Firefox中显示不同

2 个答案: