引导头-sm-6图标对齐

Question

在col 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 6的高度，您可以直接在样式属性中设置高度，或者在css文件中创建一个类并进行配置，如果您看到，我将min-height: 170px;添加到每个div中，并使用col 6类进行修复。

​

<div class="container">
        <div class="row icons">
            <div class="col-md-2 col-sm-6" style="text-align: center; min-height: 170px;">
                <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; min-height: 170px;">
                <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; min-height: 170px;">
                <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; min-height: 170px;">
                <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; min-height: 170px;">
                <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; min-height: 170px;">
                <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>

​