Bootstrap 3: разбиение строки из двух столбцов на две строки из одного столбца в мобильном режиме - PullRequest
Новая
       14

Bootstrap 3: разбиение строки из двух столбцов на две строки из одного столбца в мобильном режиме

0 голосов
/ 04 июня 2019

В настоящее время у меня есть: 

        <div class="row">
            <div class="col-xs-4" id="LocationWrapper">
                <div class="FullWidth HorizontallyCentered">Select the location:</div>
                <select id="ddlLocation"></select>
                <span id="LocationNote">blablabla</span>
            </div>
            <div class="col-xs-8" id="GraphsOptionsWrapper">
                <div class="FullWidth HorizontallyCentered">Select the graph:</div>
            </div>
        </div>

Это отлично работает для настольных компьютеров.Однако на мобильных устройствах столбцы слишком малы, чтобы вместить то, что нужно.В этом случае было бы лучше иметь две строки (вместо двух столбцов в одной строке) с одним столбцом в каждой строке.

Как я могу это сделать, не дублируя содержимое?Контент имеет некоторые элементы управления, такие как select, которые должны быть уникальными на странице.

Спасибо!

1 Ответ

0 голосов
/ 05 июня 2019

Надеюсь, эта структура поможет вам. 

<div class="row">
        <div class="col-sm-4" id="LocationWrapper">
            <div class="FullWidth HorizontallyCentered">Select the location:</div>
            <select id="ddlLocation"></select>
            <span id="LocationNote">blablabla</span>
        </div>
        <div class="col-sm-8" id="GraphsOptionsWrapper">
            <div class="FullWidth HorizontallyCentered">Select the graph:</div>
        </div>
    </div>
...