Bootstrap - ломается форма при выборе пунктов из списка

@The_Host · Регистрация: 20.08.2016

Студворк — интернет-сервис помощи студентам

Есть форма инлайновая, хочу разместить множество выпадающих списков через select

кусок кода:

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<form class="form-inline" role="form">
<label class="col-sm-2">
<p class="form_p">Выберите видеокарту</p>
<select name="Видеокарта">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</label>
 
<label class="col-sm-2">
<p class="form_p">Выберите охлаждение</p>
<select name="Оперативная память">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</label>
 
<label class="col-sm-2">
<p class="form_p">Выберите блок питания</p>
<select name="Блок питания">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</label>
 
<label class="col-sm-2">
<p class="form_p">Выберите ОЗУ</p>
<select name="Оперативная память">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</label>
 
<label class="col-sm-2">
<p class="form_p">Выберите SSD</p>
<select name="Платформа">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</label>
 
<label class="col-sm-2">
<p class="form_p">Выберите HDD</p>
<select name="Платформа">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</label>
<form>

Изначально все выглядит неплохо, но когда начинаешь выбирать из списка нижние селекты, то все начинает косить, в общем криво встает)

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

@aj17 · 20.02.2017, 12:08

а почему вы не хотите все это дело оформить в колонках? .col-sm-4 итп?

@The_Host · 20.02.2017, 12:10 **[ТС]**

aj17, и так в колонках каждый select находится

@aj17 · 20.02.2017, 12:13

Сообщение от The_Host

и так в колонках каждый select находится

приложите весь код странички, так не понятно.

Добавлено через 2 минуты
А вообще, нужно убрать думаю из label col-sm-2 и обернуть все это дело в ещё один див и уже ему дать col-sm-2

@The_Host · 20.02.2017, 12:20 **[ТС]**

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="ru"> <!--<![endif]-->
 
<head>
 
    <meta charset="utf-8">
 
    <title>Заголовок</title>
    <meta name="description" content="Описание">
 
    <!-- Bootstrap v3.3.4 Grid Styles -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-forms.min.css">
    <link href="https://fonts.googleapis.com/css?family=Lobster|Roboto" rel="stylesheet">
    <link rel="stylesheet" href="css/font-awesome.min.css">
 
    <!-- Header CSS (First Sections of Website: paste after release from _header.min.css here) -->
    <style></style>
 
    <!-- Load CSS Compilled without JS -->
    <noscript>
        <link rel="stylesheet" href="_main.min.css">
    </noscript>
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 
    <link rel="shortcut icon" href="img/favicon/favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon" href="img/favicon/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="img/favicon/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="img/favicon/apple-touch-icon-114x114.png">
    
    <style>.form_p {font-size: 0.7em; font-weight: normal;}</style>
</head>
 
<body class="isnohome">
 
    <header class="main-head">
 
              Тут код менюшек и прочего
    </header>
 
    <section class="page">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12 s-dark">
                    <form class="form-inline" role="form">
                        <input type="hidden" name="admin-data" value="Заявка на индивидуальную сборку">
 
                        <label class="col-sm-2">
                            <p class="form_p">Выберите платформу</p>
                            <select name="Платформа">
                                <option value="1">Соберу сам</option>
                                <option value="2">Xeon X5650</option>
                                <option value="3">Xeon E5450</option>
                                <option value="4">Core i7-7700k</option>
                            </select>
                        </label>
 
                        <label class="col-sm-2">
                            <p class="form_p">Выберите процессор</p>
                            <select name="Видеокарта">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                            </select>
                        </label>
 
                        <label class="col-sm-2">
                            <p class="form_p">Выберите материнскую плату</p>
                            <select name="Видеокарта">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                            </select>
                        </label>
 
                        <label class="col-sm-2">
                            <p class="form_p">Выберите видеокарту</p>
                            <select name="Видеокарта">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                            </select>
                        </label>
 
                        <label class="col-sm-2">
                            <p class="form_p">Выберите охлаждение</p>
                            <select name="Оперативная память">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                            </select>
                        </label>
 
                        <label class="col-sm-2">
                            <p class="form_p">Выберите блок питания</p>
                            <select name="Блок питания">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                            </select>
                        </label>
 
                        <label class="col-sm-2">
                            <p class="form_p">Выберите ОЗУ</p>
                            <select name="Оперативная память">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                            </select>
                        </label>
 
                        <label class="col-sm-2">
                            <p class="form_p">Выберите SSD</p>
                            <select name="Платформа">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                            </select>
                        </label>
 
                        <label class="col-sm-2">
                            <p class="form_p">Выберите HDD</p>
                            <select name="Платформа">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                            </select>
                        </label>
 
                        <label class="col-sm-2">
                            <p class="form_p">Выберите корпус</p>
                            <select name="Платформа">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                            </select>
                        </label>
 
                        <label class="col-sm-2">
                            <p class="form_p">Дополнительные услуги</p>
                            <select name="Доп. услуги">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                            </select>
                        </label>
                        
                    </form>
                </div>
 
            </div>
        </div>
    </section>
 
    <footer class="main-foot">
        тут код футера
 
    </footer>
 
    <!--[if lt IE 9]>
    <script src="libs/html5shiv/es5-shim.min.js"></script>
    <script src="libs/html5shiv/html5shiv.min.js"></script>
    <script src="libs/html5shiv/html5shiv-printshiv.min.js"></script>
    <script src="libs/respond/respond.min.js"></script>
    <![endif]-->
 
    <!-- Load CSS -->
    <script>
        function loadCSS(hf) {
            var ms=document.createElement("link");ms.rel="stylesheet";
            ms.href=hf;document.getElementsByTagName("head")[0].appendChild(ms);
        }
        loadCSS("css/header.min.css"); //Header Styles (compress & paste to header after release)
        loadCSS("css/main.min.css");   //User Styles + Media Queries
    </script>
 
    <!-- Load Scripts -->
    <script>var scr = {"scripts":[
        {"src" : "js/libs.js", "async" : false},
        {"src" : "js/common.js", "async" : false}
        ]};!function(t,n,r){"use strict";var c=function(t){if("[object Array]"!==Object.prototype.toString.call(t))return!1;for(var r=0;r<t.length;r++){var c=n.createElement("script"),e=t[r];c.src=e.src,c.async=e.async,n.body.appendChild(c)}return!0};t.addEventListener?t.addEventListener("load",function(){c(r.scripts);},!1):t.attachEvent?t.attachEvent("onload",function(){c(r.scripts)}):t.onload=function(){c(r.scripts)}}(window,document,scr);
    </script>
 
</body>
</html>

Добавлено через 6 минут
aj17, Мне нужно чтобы списки были слева на право друг за другом, а если их все в один col-sm-2 обернуть то они сверху вниз пойдут

Единственное что может помочь это обернуть внутри формы 6 лейбелов в одну группу, а следующие 6 в другую, но в этом случае у меня все совсем печально выглядеть начинает.
Не отрицаю что просто не понимаю как это правильно сделать, поэтому прошу о помощи

С другой стороны как тогда на мобильных устройствах сделать тоже не понятно

@aj17 · 20.02.2017, 12:26

Код не сильно помог) А почему вот такими средствами не получилось?

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
   <div class="container-fluid">
       <div class="row">
           <div class="col-xs-6 col-sm-2">
               <div class="form-group">
                   <label for="1">select menu</label>
                   <select id="1" class="form-control">
                       <option>Disabled select</option>
                   </select>
               </div>
           </div>
           <div class="col-xs-6 col-sm-2">
               <div class="form-group">
                   <label for="1">select menu</label>
                   <select id="1" class="form-control">
                       <option>Disabled select</option>
                   </select>
               </div>
           </div>
           <div class="col-xs-6 col-sm-2">
               <div class="form-group">
                   <label for="1">select menu</label>
                   <select id="1" class="form-control">
                       <option>Disabled select</option>
                   </select>
               </div>
           </div>
           <div class="col-xs-6 col-sm-2">
               <div class="form-group">
                   <label for="1">select menu</label>
                   <select id="1" class="form-control">
                       <option>Disabled select</option>
                   </select>
               </div>
           </div>
           <div class="col-xs-6 col-sm-2">
               <div class="form-group">
                   <label for="1">select menu</label>
                   <select id="1" class="form-control">
                       <option>Disabled select</option>
                   </select>
               </div>
           </div>
           <div class="col-xs-6 col-sm-2">
               <div class="form-group">
                   <label for="1">select menu</label>
                   <select id="1" class="form-control">
                       <option>Disabled select</option>
                   </select>
               </div>
           </div>
           
           <div class="col-xs-6 col-sm-2">
               <div class="form-group">
                   <label for="1">select menu</label>
                   <select id="1" class="form-control">
                       <option>Disabled select</option>
                   </select>
               </div>
           </div>
           <div class="col-xs-6 col-sm-2">
               <div class="form-group">
                   <label for="1">select menu</label>
                   <select id="1" class="form-control">
                       <option>Disabled select</option>
                   </select>
               </div>
           </div>
           <div class="col-xs-6 col-sm-2">
               <div class="form-group">
                   <label for="1">select menu</label>
                   <select id="1" class="form-control">
                       <option>Disabled select</option>
                   </select>
               </div>
           </div>
           <div class="col-xs-6 col-sm-2">
               <div class="form-group">
                   <label for="1">select menu</label>
                   <select id="1" class="form-control">
                       <option>Disabled select</option>
                   </select>
               </div>
           </div>
           <div class="col-xs-6 col-sm-2">
               <div class="form-group">
                   <label for="1">select menu</label>
                   <select id="1" class="form-control">
                       <option>Disabled select</option>
                   </select>
               </div>
           </div>
           <div class="col-xs-6 col-sm-2">
               <div class="form-group">
                   <label for="1">select menu</label>
                   <select id="1" class="form-control">
                       <option>Disabled select</option>
                   </select>
               </div>
           </div>
       </div>
   </div>
    
</body>
</html>

@The_Host · 20.02.2017, 13:12 **[ТС]**

aj17, Супер! Для того чтобы это дело отправлялось по нажатию кнопки по идеи надо все обернуть в тег form ?

@aj17 · 20.02.2017, 13:16

Сообщение от The_Host

aj17, Супер! Для того чтобы это дело отправлялось по нажатию кнопки по идеи надо все обернуть в тег form ?

для работы формы - обязательный тег form)

@The_Host · 20.02.2017, 13:25 **[ТС]**

aj17, Просто тогда приходим к той же проблеме

Какие-то классы пересекаются между собой похоже

@aj17 · 20.02.2017, 13:29

Сообщение от The_Host

Просто тогда приходим к той же проблеме

ещё раз расскажите, что не получается) Я правда что-то не пойму, на скриншоте видно, что к селектам цепляется то ли скрипт, то ли стили...

@The_Host · 20.02.2017, 13:50 **[ТС]**

aj17, У класса form-control лишний padding и border, убрал - стало норм
сейчас разбираюсь почему нету фона у выпадающего списка

Добавлено через 17 минут
aj17, Отредактировал как надо. Спасибо большое за помощь!

Осталось сделать так чтобы все это дело приходило на почту))
Не подскажите где почитать как это сделать, а то я не совсем разобрался?

@aj17 · 20.02.2017, 15:33

Сообщение от The_Host

Осталось сделать так чтобы все это дело приходило на почту))
Не подскажите где почитать как это сделать, а то я не совсем разобрался?

отправка почты осуществляется средствами серверного языка. Через php, погуглите отправка формы php

@The_Host · 20.02.2017, 15:38 **[ТС]**

aj17, ну прям совсем банальности я знаю)
Уже разобрался, спасибо!)

Новые блоги и статьи Все статьи Все блоги /
Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.
Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	20.02.2017, 12:08
	а почему вы не хотите все это дело оформить в колонках? .col-sm-4 итп? 0

@The_Host 7 / 7 / 3 Регистрация: 20.08.2016 Сообщений: 188
	20.02.2017, 12:10 [ТС]
	aj17, и так в колонках каждый select находится 0

@The_Host 7 / 7 / 3 Регистрация: 20.08.2016 Сообщений: 188
	20.02.2017, 13:12 [ТС]
	aj17, Супер! Для того чтобы это дело отправлялось по нажатию кнопки по идеи надо все обернуть в тег form ? 0

@The_Host 7 / 7 / 3 Регистрация: 20.08.2016 Сообщений: 188
	20.02.2017, 13:25 [ТС]
	aj17, Просто тогда приходим к той же проблеме Какие-то классы пересекаются между собой похоже Миниатюры 0

@The_Host 7 / 7 / 3 Регистрация: 20.08.2016 Сообщений: 188
	20.02.2017, 13:50 [ТС]
	aj17, У класса form-control лишний padding и border, убрал - стало норм сейчас разбираюсь почему нету фона у выпадающего списка Добавлено через 17 минут aj17, Отредактировал как надо. Спасибо большое за помощь! Осталось сделать так чтобы все это дело приходило на почту)) Не подскажите где почитать как это сделать, а то я не совсем разобрался? 0

@The_Host 7 / 7 / 3 Регистрация: 20.08.2016 Сообщений: 188
	20.02.2017, 15:38 [ТС]
	aj17, ну прям совсем банальности я знаю) Уже разобрался, спасибо!) 0

Bootstrap - ломается форма при выборе пунктов из списка

Решение