Сетка, реагирующая на пользовательский интерфейс, упаковывает столбцы в строки jQuery mobile

Question

Попытка создать адаптивную сетку, которая поддерживает мобильные экраны. При использовании мобильного телефона jQuery ui-responsive сетка, столбец переносится и ведет себя как строки (одна под одной), хотя первая строка имеет место для размещения второго столбца. Если я тестирую то же самое на экранах размеров планшета, все работает нормально. Где я не прав или это как себя ведет?

Код, который я использовал

<div class="ui-grid-a ui-responsive">
                    <div class="ui-block-a">
                        <a href="#" id="link_frgt_pswd" data-inline="true" >Forgot Password ?</a>
                    </div>
                    <div class="ui-block-b">
                        <a href="#" id="btn-submit" data-role="button" data-inline="true">Login</a>
                    </div>

                </div>
                <div class="ui-grid-a ui-responsive">
                    <div class="ui-block-a">
                        <h3>For Member </h3>
                    </div>
                    <div class="ui-block-b">
                        <a href="#" id="link_unlock_acc" data-inline="true" >Unlock Account</a>
                    </div>
                </div>
                <div class="ui-grid-a ui-responsive">
                    <div class="ui-block-a">
                        <h3>For Provider </h3>
                    </div>
                    <div class="ui-block-b">
                        <a href="#" id="btn-provider" data-role="button" data-inline="true">Register</a>
                    </div>
                </div>

Я даже пытался уменьшить ширину столбцов с помощью CSS .ui-grid-a .ui-block-a { width: 30% } .ui-grid-a .ui-block-b { width: 30% }, это уменьшает ширину, но все же ui-block-b остается в следующей строке.

Answer 1

Класс ji-отзывчивый в jQM добавляет медиа-запрос CSS для максимальной ширины 560 пикселей. Поэтому каждый раз, когда размер экрана меньше 560 пикселей, столбцы располагаются друг над другом. Если вы хотите использовать собственную точку останова, а не реагировать на пользовательский интерфейс, создайте собственное имя класса и установите желаемую точку останова.

Например, если вы хотите, чтобы наложение происходило только при ширине экрана ниже 300 пикселей:

<div class="ui-grid-a my-breakpoint">...</div>

@media all and (max-width: 300px) {
    .my-breakpoint .ui-block-a,
    .my-breakpoint .ui-block-b,
    .my-breakpoint .ui-block-c,
    .my-breakpoint .ui-block-d,
    .my-breakpoint .ui-block-e {
        width: 100%;
        float: none;
    }
}

DEMO

Вы также можете посмотреть это демо с сайта jQM:

http://demos.jquerymobile.com/1.4.5/grids-custom-responsive/