引导发送div md-6，而不是对齐

Question

我有一个简单的布局，其中有4列(col-lg3 -/md/sm-6和col-xs-12)。它的渲染应该非常简单，如下所示：

​

​

当它使用3列宽度时，它工作得非常好。但当它们转动md或sm宽度时，它们中的一个与另一个的衬里一起下降：

​

​

我似乎找不到发生了什么。有什么帮助吗？HTML和CSS代码如下：

<img src="\galeria\repositorio\images\landing\mensalidades-iguais\depoimento-header.png" class="img-responsive"/>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                    <div class="img-depoimentos-up">
                        <img src="\galeria\repositorio\images\landing\mensalidades-iguais\beatriz.png"/>
                    </div>
                    <img class="quotes" src="\galeria\repositorio\images\landing\mensalidades-iguais\quotes.png"/>
                    <p class="txt-depoimentos">
                        Suporte para aprender e tranquilidade para pagar. A Skill foi essencial para que eu ganhasse uma bolsa de estudos para a Espanha!
                    </p>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                    <div class="img-depoimentos-up">
                        <img src="\galeria\repositorio\images\landing\mensalidades-iguais\gabriel.png"/>   
                    </div>
                    <img class="quotes" src="\galeria\repositorio\images\landing\mensalidades-iguais\quotes.png"/>
                    <p class="txt-depoimentos">
                        Sonhar não custa caro, ainda mais na Skill! Aprender inglês fará toda a diferença na hora de conquistar meu primeiro estágio.
                    </p>       
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                    <div class="img-depoimentos-down">
                        <img src="\galeria\repositorio\images\landing\mensalidades-iguais\eduardo.png"/>
                    </div>
                    <img class="quotes" src="\galeria\repositorio\images\landing\mensalidades-iguais\quotes.png"/>
                    <p class="txt-depoimentos">
                        Tudo começou na Skill. Fui aluno e professor! Hoje eu trabalho em uma startup.
                    </p>                    
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                    <div class="img-depoimentos-down">
                        <img src="\galeria\repositorio\images\landing\mensalidades-iguais\beatriz.png"/>
                    </div>
                    <img class="quotes" src="\galeria\repositorio\images\landing\mensalidades-iguais\quotes.png"/>
                    <p class="txt-depoimentos">
                        O inglês na ponta da língua e economia na mensalidade me ajudaram a viajar. Com a Skill, conheci novas culturas pelo mundo.
                    </p>                 
                </div>
            </div>
        </div>

//CSS code for lg-3
.quotes {
    padding-bottom: 15px;
}.img-depoimentos-up {
    max-width: 100%;
    height: auto;
    margin-top: -80%;
}

.img-depoimentos-down {
    max-width: 100%;
    height: auto;
    margin-top: -80%;
}
.txt-depoimentos {
    color: rgb(71, 107, 172);
    font-weight: bold;
    font-size: 18px;
}

//Changes made using media query for md-sm-6
img-depoimentos-up {
    margin-top: -30%;
}
.img-depoimentos-down {
    margin-top: 10%;
}

Answer 1

你可以试试这样的东西：

：

    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                <div class="img-depoimentos-up">
                    <img src="\galeria\repositorio\images\landing\mensalidades-iguais\beatriz.png"/>
                </div>
                <img class="quotes" src="\galeria\repositorio\images\landing\mensalidades-iguais\quotes.png"/>
                <p class="txt-depoimentos">
                    Suporte para aprender e tranquilidade para pagar. A Skill foi essencial para que eu ganhasse uma bolsa de estudos para a Espanha!
                </p>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                <div class="img-depoimentos-up">
                    <img src="\galeria\repositorio\images\landing\mensalidades-iguais\gabriel.png"/>   
                </div>
                <img class="quotes" src="\galeria\repositorio\images\landing\mensalidades-iguais\quotes.png"/>
                <p class="txt-depoimentos">
                    Sonhar não custa caro, ainda mais na Skill! Aprender inglês fará toda a diferença na hora de conquistar meu primeiro estágio.
                </p>       
            </div>
            <div class="clearfix hidden-lg hidden-xs"></div>  <--- HERE

            <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                <div class="img-depoimentos-down">
                    <img src="\galeria\repositorio\images\landing\mensalidades-iguais\eduardo.png"/>
                </div>
                <img class="quotes" src="\galeria\repositorio\images\landing\mensalidades-iguais\quotes.png"/>
                <p class="txt-depoimentos">
                    Tudo começou na Skill. Fui aluno e professor! Hoje eu trabalho em uma startup.
                </p>                    
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                <div class="img-depoimentos-down">
                    <img src="\galeria\repositorio\images\landing\mensalidades-iguais\beatriz.png"/>
                </div>
                <img class="quotes" src="\galeria\repositorio\images\landing\mensalidades-iguais\quotes.png"/>
                <p class="txt-depoimentos">
                    O inglês na ponta da língua e economia na mensalidade me ajudaram a viajar. Com a Skill, conheci novas culturas pelo mundo.
                </p>                 
            </div>
        </div>
    </div>

这里是文档：https://getbootstrap.com/docs/3.3/css/#grid-responsive-resets

Answer 2

看起来您使div.img-depoimentos-up响应而不是图像标记尝试如下：

.img-depoimentos-up {
        margin-top: -80%; 
    }

.img-depoimentos-up img {
    max-width: 100%;
    height: auto;
}

希望能成功。