В окне просмотра значков col-sm-6 выровняйте их, как показано на рисунке, пробовал использовать clearfix, но не работающая прямая ссылка на сайт 38.117.223.31/emrmus.asp

Un-aligned icons

<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>
0
Mustafa Saleem 19 Окт 2017 в 19:32

3 ответа

Лучший ответ

Использование 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>
1
ncardeli 19 Окт 2017 в 16:45

Чтобы решить проблему, добавьте clear:left; к нечетным элементам.

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

В основном происходит то, что float не работает, когда первый элемент в строке выше, чем второй элемент в строке.

0
Jonathan 19 Окт 2017 в 16:44

Очевидно, проблема в высоте каждого col-sm-6, вы можете установить высоту непосредственно в свойствах стиля или создать класс и настроить его в своем CSS-файле, если вы видите, я добавляю min-height: 170px; в каждый div с классом col-sm-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>
0
Jeison Flórez 19 Окт 2017 в 17:09