Bootstrap сетка внутри панелей большого размера

Question

Я добавляю некоторый новый контент на старую страницу, которая использует библиотеку Dojo для создания 2 панелей, между которыми можно перетаскивать распорку влево / вправо для расширения / сжатия панелей. Думайте об этом как о редакторе кода с разделенным видом на 2 файла.

Я пытался поместить форму на одну из панелей, чтобы она была такой, чтобы элементы формы и метки складывались, когда панель становится маленькой достаточно:

<form>
    <div class="container">
        <div class="form-group">
            <div class="row">
                <div class="col-md-1">
                    <label for="ID">Identifier</label>
                </div>
                <div class="col-md-5">
                    <select name="ID" id="ID">
                        <option value="1">1</option>
                    </select>
                </div>
                <div class="col-md-1">
                    <label for="Direction">Direction</label>
                </div>
                <div class="col-md-5">
                    <select name="Direction" id="Direction">
                        <option value="ASCENDING">ASCENDING</option>
                        <option value="DESCENDING">DESCENDING</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
</form>

Однако я заметил, что при изменении размеров панелей поведение сетки не будет применяться. Применяется только тогда, когда я фактически изменяю размеры всего окна.

Использует ли bootstrap только размер окна для своей сетки или может быть сделано так, чтобы оно реагировало на динамически изменяющийся размер его родительского компонента ?

Answer 1

Да, система сетки загрузчика из 12 столбцов основана на размере устройства или области просмотра (т. Е. Размера окна или видимой области страницы внутри окна).

Для справки

• .col-xs-: сверхмалые устройства Телефоны (<768px) </li>
• .col-sm-: малые устройства Таблетки (≥768px)
• .col-md-: средние устройства Настольные ПК (≥992px)
• .col-lg-: десктопы больших устройств (≥1200 пикселей)

, если вы используете v.3, здесь do c для ссылки ссылка