html - Bootstrap col-sm-6 图标对齐

Question

在 col-sm-6 图标的视口(viewport)处取消对齐，如图所示尝试使用 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>