Блог

Я пытаюсь создать форму, но по какой-то причине я не могу получить несколько выпадающих списков для правильного отображения одного под другим. Вот мой код:

             <div class="form-group" style="display: block;">
            <label for="step1.1" class="control-label col-md-3 col-sm-3 col-xs-4">Label 1</label>
            <div class="col-md-4 col-sm-4 col-xs-8">
                <select name="data[step1][1]" class="form-control col-md-7 col-xs-12"
                        id="step1.1">

                    <option value="1">1</option>
                    <option value="x">X</option>
                </select>
            </div>
        </div>
        <div class="form-group" style="display: block;">
            <label for="step1.2" class="control-label col-md-3 col-sm-3 col-xs-4">Label 2</label>
            <div class="col-md-4 col-sm-4 col-xs-8">
                <select name="data[step1][2]" class="form-control col-md-7 col-xs-12"
                        id="step1.2">

                    <option value="2">2</option>
                    <option value="x">X</option>
                </select>
            </div>
        </div>
  

Я не знаю, что я делаю не так…

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

В вашем коде вы используете 3 столбца (col-md-3) для метки и 4 столбца (col-md-4) для поля выбора. Таким образом, общее количество равно 3 4 = 7, из-за чего осталось 5 столбцов. Поэтому вместо использования col-md-4 используйте col-md-9 для завершения сетки

Здесь идет правильный код:-

 <div class="form-group" style="display: block;">
	<label for="step1.1" class="control-label col-md-3 col-sm-3 col-xs-4">Label 1</label>
	<div class="col-md-9 col-sm-9 col-xs-8">
		<select name="data[step1][1]" class="form-control col-md-7 col-xs-12"
			id="step1.1">
			<option value="1">1</option>
			<option value="x">X</option>
		</select>
	</div>
</div>
<div class="form-group" style="display: block;">
	<label for="step1.2" class="control-label col-md-3 col-sm-3 col-xs-4">Label 2</label>
	<div class="col-md-9 col-sm-9 col-xs-8">
		<select name="data[step1][2]" class="form-control col-md-7 col-xs-12"
			id="step1.2">
			<option value="2">2</option>
			<option value="x">X</option>
		</select>
	</div>
</div>  

Вот 2 способа, которыми вы могли бы это сделать: http://pastebin.com/XivnbbHE

Я не уверен, хотите ли вы, чтобы элементы были встроены друг в друга или один поверх другого, поэтому я включил оба. Вы можете использовать класс bootstrap inline или form-inline для достижения этой цели. В первом случае выбор очень узкий. Вы могли бы исправить это с помощью css.

В Bootstrap используется макет из 12 столбцов, см. Примеры сетки начальной загрузки здесь

В вашем случае вы используете col-md-3 для метки и col-md-4 для ввода, так что получается 7 сеток. Вы должны использовать col-md-4 и col-md-8 или что-то, что заполняет 12 сеток. То же самое касается sm и xs

Попробуйте http://shoelace .ввод-вывод для проверки сеток.