Я использую Bootstrap 3, и у меня довольно стандартный макет страницы: один широкий столбец слева (.col-md-8), содержащий обычный текст, и один более узкий столбец справа (.col-md-4), содержащий форму.
Каждое из полей формы, в свою очередь, заключено в .form-group.
В моей первой попытке .form-groups выходили за левый и правый края содержащего столбца. (Убедитесь, что ширина фрейма предварительного просмотра JSFiddle не меньше ширины точки останова sm Bootstrap.) Я добавил розовый фоновый элемент div, чтобы показать поле, в котором .form-groups должны оставаться.
Во второй попытке я добавил .container внутри .col-md-4, а затем обернул каждую .form-group внутри .row и .col-md-4.
Это помогает, но... является ли это правильным и предпочтительным способом? Кажется, что для достижения чего-то, что должно происходить естественным образом, требуется очень много дополнительной шаблонной разметки.
Документация Bootstrap довольно хороша, но в ней замалчиваются некоторые вещи «общей картины», подобные этой. Возможно, это очевидно для людей, которые уже имеют опыт работы с адаптивным CSS, но для новичка вроде меня это может сбить с толку.
Вот код из моей первой попытки:
- jsFiddle demo
Broken version
Don't forget to expand the width of this preview window. Otherwise you'll just see Boostrap's xs (vertically stacked) layout.
This column will be filled with text. Lorem ipsum dolor sit amet...
Name
Email
Submit
А вот код моей второй, возможно, исправленной попытки:
- jsFiddle demo
Corrected (?) version
Don't forget to expand the width of this preview window. Otherwise you'll just see Boostrap's xs (vertically stacked) layout.
This column will be filled with text. Lorem ipsum dolor sit amet...
Name
Email
Submit
Подробнее здесь: https://stackoverflow.com/questions/263 ... of-columns
