Question

在col-sm-6图标的视口中，如使用clearfix尝试的图片所示取消对齐但不工作网站的实时链接是38.117.223.31/emrmus.asp

<div class="container">
        <div class="row icons">
            <div class="col-md-2 col-sm-6" style="text-align: center">
                <img class="mt-10" src="emrmus/images/circle-h-1.png">
                <div class=" right-icons" >Patient <br> portal</div>
            </div>
            <div class="col-md-2 col-sm-6" style="text-align: center">
                <img class="mt-10" src="emrmus/images/circle-h-2.png">
                <div class=" right-icons" >e-Labs,  <br> Online Payments</div>
            </div>

            <div class="col-md-2 col-sm-6" style="text-align: center">
                <img class="mt-10" src="emrmus/images/circle-h-3.png">
                <div class=" right-icons">Patient <br> Support</div>
            </div>

            <div class="col-md-2 col-sm-6" style="text-align: center">
                <img class="mt-10" src="emrmus/images/circle-h-4.png">
                <div class=" right-icons" >E-prescription</div>
            </div>

            <div class="col-md-2 col-sm-6" style="text-align: center">
                <img class="mt-10" src="emrmus/images/circle-h-5.png">
                <div class=" right-icons" >Document <br> Imaging</div>
            </div>
            <div class="col-md-2 col-sm-6" style="text-align: center">
                <img class="mt-10" src="emrmus/images/circle-h-6.png">
                <div class=" right-icons">Gold certifieda e-Rx with <br> medication history & formulary</div>

            </div>

        </div>

    </div>

Answer 1

使用clearfix确实有效，至少可以使用您发布的示例：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
        <div class="row icons">
            <div class="col-md-2 col-sm-6" style="text-align: center">
                <img class="mt-10" src="emrmus/images/circle-h-1.png">
                <div class=" right-icons" >Patient <br> portal</div>
            </div>
            <div class="col-md-2 col-sm-6" style="text-align: center">
                <img class="mt-10" src="emrmus/images/circle-h-2.png">
                <div class=" right-icons" >e-Labs,  <br> Online Payments</div>
            </div>

            <div class="col-md-2 col-sm-6" style="text-align: center">
                <img class="mt-10" src="emrmus/images/circle-h-3.png">
                <div class=" right-icons">Patient <br> Support</div>
            </div>

            <div class="col-md-2 col-sm-6" style="text-align: center">
                <img class="mt-10" src="emrmus/images/circle-h-4.png">
                <div class=" right-icons" >E-prescription</div>
            </div>
            
            <div class="clearfix visible-sm"></div>

            <div class="col-md-2 col-sm-6" style="text-align: center">
                <img class="mt-10" src="emrmus/images/circle-h-5.png">
                <div class=" right-icons" >Document <br> Imaging</div>
            </div>
            <div class="col-md-2 col-sm-6" style="text-align: center">
                <img class="mt-10" src="emrmus/images/circle-h-6.png">
                <div class=" right-icons">Gold certifieda e-Rx with <br> medication history & formulary</div>

            </div>

        </div>

    </div>

Answer 2

要解决此问题，请在奇数元素中添加clear:left;。

@media (max-width: 991px) {
    .row.icons .col-sm-6:nth-child(odd) {
        clear: left;
    }
}

基本上发生的事情是，当行中的第一个元素高于行中的第二个元素时，float不起作用。

Answer 3

显然，问题在于每个col-sm-6的高度，您可以直接在样式属性中设置高度，或者在css文件中创建一个类并进行配置，如果看到，我添加{{1使用col-sm-6类对每个div进行修复。

＆＃13;

min-height: 170px;

＆＃13;

Bootstrap col-sm-6图标对齐

3 个答案: