Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 5.00/11: Рейтинг темы: голосов - 11, средняя оценка - 5.00
403 / 19 / 5
Регистрация: 17.01.2017
Сообщений: 572

При использовании bootstrap и добавлении div поля выстраиваются в столбик. Как исправить?

17.02.2020, 11:15. Показов 2085. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Контейнеры div с input размещены в строчку как на картинки.

Стоит добавить дополнительный div, то поля выстраиваются в столбик.

Я использую bootstrap.
Вот код: div из-за которого сбивается вёрстка я пока закомментировал.
Как исправить, чтобы при добавление div'ов вёрстка не "ломалась".
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
 
<div id="wrapper">
<div class="row drive">
    <!--<div class="drive1">-->
                            <div class="form-group col-md-3 col-sm-3">
                                       <label class="name1">Возраст, лет</label>
                                       <input type="text" class="form-control" id="age_1"> 
                                  </div>
                                  <div class="form-group col-md-3 col-sm-3">
                                      <label class="name1">Стаж, лет</label>
                                      <input type="text" class="form-control" id="exp_1">  
                                  </div>
                                  <div class="form-group col-md-3 col-sm-3">
                                    <div class="form__field filled">
                                        <label class="name1">Пол</label>
                                        <div class="select__wrap">
                                            <select class="form-control">
                                                <option label="-"></option>
                                                <option value="1">Мужской</option>
                                                <option value="0">Женский</option>
                                            </select>
                                        </div>
                                    </div>
                                 </div>
                              
                               
     <!--</div>-->
</div>
</div>  
</body>
</html>
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
17.02.2020, 11:15
Ответы с готовыми решениями:

Twitter bootstrap колонки выстраиваются друг под другом
Друзья! помогите пожалуйста. Начала осваивать Twitter bootstrap по видео-урокам. Но у меня не работает код как должен, причем не работает...

Сдвигается верстка при добавлении DIV с Ajax-контентом (теряется связь между DIV)
Заказал я в общем дизайн и верстку на фрилансе, начал писать код и столкнулся с проблемкой: В цикле JS подгружается динамически контент....

Как убрать отступ при добавлении нового div
Всем привет! Поиском пользовался но мало что получается. есть сайт - http://academdacha.ru Когда в header добавляю div с формой...

2
469 / 334 / 144
Регистрация: 16.02.2018
Сообщений: 930
17.02.2020, 11:18
Лучший ответ Сообщение было отмечено mrtoxas как решение

Решение

Цитата Сообщение от Katerina1993 Посмотреть сообщение
Стоит добавить дополнительный div, то поля выстраиваются в столбик
добавьте ему класс .row
2
403 / 19 / 5
Регистрация: 17.01.2017
Сообщений: 572
17.02.2020, 11:53  [ТС]
Оказывается, всё очень просто, могла и сама додуматься. Спасибо за помощь.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
17.02.2020, 11:53
Помогаю со студенческими работами здесь

Блоки div с float криво выстраиваются
Есть фотогалерея которая выводится из БД. Фотки подписываются Но если текста много то блоки прыгают непонятно как.. хотелось бы сделать...

Как сделать так чтобы при наведении мышки на ссылку div менялось изображение при использовании z-index
Здравствуйте, уважаемые участники форума! Подскажите мне, пожалуйста, как сделать так чтобы кнопка &quot;Заказать обратный звонок&quot;...

Элементы внутри div не выстраиваются на один уровень
Добрый день! Есть одна проблема и я не понимаю, как ее решить. Надеюсь на вашу помощь. Внутри формы имеется div, внутри которого три...

Постоянный шум при записи с микрофона при использовании внешней usb аудио карты, как исправить?
Здравствуйте, купил 2 usb аудиокарты на базе чипа c-media 108 Пытался настроить их как на windows (ноутбук) так и на linux (ноутбук),...

Как при добавлении новой строки в базу увеличить значение поля id на 1
Народ, не могу сообразить как впихнуть в этот метод добавления новой строки, увеличение значения поля id в таблице на единицу. Но...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru