Создайте форму начальной загрузки с несколькими встроенными метками и выберите

Question

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

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

<div class="form-row">      
                    <div class="form-group col-md-2">
                        <label id="monday">Monday</label>
                    </div>
                    <div class="form-group col-md-1">
                        <label id="mon-from">From</label>
                    </div>
                    <div class="form-group col-md-2">                       
                            <select class="form-control-sm" id="mon-from-hrs" name="mon-from-hrs">
                                <option value="00">00</option>
                                <option value="01">01</option>
                                <option value="02">02</option>
                                <option value="03">03</option>
                                <option value="04">04</option>
                                <option value="05">05</option>
                                <option value="06">06</option>
                                <option value="07">07</option>
                                <option value="08" selected>08</option>
                                <option value="09">09</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>  
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option>
                                <option value="16">16</option>
                                <option value="17">17</option>
                                <option value="18">18</option>
                                <option value="19">19</option>
                                <option value="20">20</option>
                                <option value="21">21</option>
                                <option value="22">22</option>
                                <option value="23">23</option>
                            </select>
                            <label id="mon-semi-from">:</label>
                            <select class="form-control-sm" id="mon-from-min" name="mon-from-min">
                                <option value="00" selected>00</option>
                                <option value="01">01</option>
                                <option value="02">02</option>
                                <option value="03">03</option>
                                <option value="04">04</option>
                                <option value="05">05</option>
                                <option value="06">06</option>
                                <option value="07">07</option>
                                <option value="08">08</option>
                                <option value="09">09</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>  
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option>
                                <option value="16">16</option>
                                <option value="17">17</option>
                                <option value="18">18</option>
                                <option value="19">19</option>
                                <option value="20">20</option>
                                <option value="21">21</option>
                                <option value="22">22</option>
                                <option value="23">23</option>
                                <option value="24">24</option>
                                <option value="25">25</option>
                                <option value="26">26</option>
                                <option value="27">27</option>
                                <option value="28">28</option>
                                <option value="29">29</option>
                                <option value="30">30</option>
                                <option value="31">31</option>
                                <option value="32">32</option>
                                <option value="33">33</option>
                                <option value="34">34</option>
                                <option value="35">35</option>  
                                <option value="36">36</option>
                                <option value="37">37</option>
                                <option value="38">38</option>
                                <option value="39">39</option>
                                <option value="40">40</option>
                                <option value="41">41</option>
                                <option value="42">42</option>
                                <option value="43">43</option>
                                <option value="44">44</option>
                                <option value="45">45</option>
                                <option value="46">46</option>
                                <option value="47">47</option>
                                <option value="49">49</option>
                                <option value="50">50</option>
                                <option value="51">51</option>  
                                <option value="52">52</option>
                                <option value="53">53</option>
                                <option value="54">54</option>
                                <option value="55">55</option>
                                <option value="56">56</option>
                                <option value="57">57</option>
                                <option value="58">58</option>
                                <option value="59">59</option>
                            </select>
                    </div>
                    <div class="form-group col-md-1">
                        <label id="mon-to">To</label>
                    </div>
                    <div class="form-group col-md-2">
                        <select class="form-control-sm" id="mon-to-hrs" name="mon-to-hrs">
                                <option value="00">00</option>
                                <option value="01">01</option>
                                <option value="02">02</option>
                                <option value="03">03</option>
                                <option value="04">04</option>
                                <option value="05">05</option>
                                <option value="06">06</option>
                                <option value="07">07</option>
                                <option value="08">08</option>
                                <option value="09">09</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>  
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option>
                                <option value="16">16</option>
                                <option value="17" selected>17</option>
                                <option value="18">18</option>
                                <option value="19">19</option>
                                <option value="20">20</option>
                                <option value="21">21</option>
                                <option value="22">22</option>
                                <option value="23">23</option>
                            </select>
                            <label id="mon-semi-to">:</label>
                            <select class="form-control-sm" id="mon-to-min" name="mon-to-min">
                                <option value="00" selected>00</option>
                                <option value="01">01</option>
                                <option value="02">02</option>
                                <option value="03">03</option>
                                <option value="04">04</option>
                                <option value="05">05</option>
                                <option value="06">06</option>
                                <option value="07">07</option>
                                <option value="08">08</option>
                                <option value="09">09</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>  
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option>
                                <option value="16">16</option>
                                <option value="17">17</option>
                                <option value="18">18</option>
                                <option value="19">19</option>
                                <option value="20">20</option>
                                <option value="21">21</option>
                                <option value="22">22</option>
                                <option value="23">23</option>
                                <option value="24">24</option>
                                <option value="25">25</option>
                                <option value="26">26</option>
                                <option value="27">27</option>
                                <option value="28">28</option>
                                <option value="29">29</option>
                                <option value="30">30</option>
                                <option value="31">31</option>
                                <option value="32">32</option>
                                <option value="33">33</option>
                                <option value="34">34</option>
                                <option value="35">35</option>  
                                <option value="36">36</option>
                                <option value="37">37</option>
                                <option value="38">38</option>
                                <option value="39">39</option>
                                <option value="40">40</option>
                                <option value="41">41</option>
                                <option value="42">42</option>
                                <option value="43">43</option>
                                <option value="44">44</option>
                                <option value="45">45</option>
                                <option value="46">46</option>
                                <option value="47">47</option>
                                <option value="49">49</option>
                                <option value="50">50</option>
                                <option value="51">51</option>  
                                <option value="52">52</option>
                                <option value="53">53</option>
                                <option value="54">54</option>
                                <option value="55">55</option>
                                <option value="56">56</option>
                                <option value="57">57</option>
                                <option value="58">58</option>
                                <option value="59">59</option>
                            </select>
                    </div>
                    <div class="form-group col-md-2">
                        <div class="custom-control custom-checkbox mr-sm-2" id="chkMon">
                            <input type="checkbox" class="custom-control-input" id="closedMon">
                            <label class="custom-control-label" for="closedMon">Closed</label>                          
                        </div>
                        <label id="mon24Text" hidden></label>
                    </div>
                    <div class="form-group col-md-2">
                        <a href="javascript: specialMon();" id="specialHrsMon">Add special hours</a>
                    </div>
                </div>

Это прекрасно работает на экранах настольных компьютеров и ноутбуков, но полностью не работает намобильный, с обрезанными элементами выбора.

Может кто-нибудь показать мне в правильном направлении.

Answer 1

использовать медиа-запросы для стилизации мобильного представления.например:

@media(min-width:320px)and(max-width:768px){
.form-group{
width:100%;
display:block;
}
}

настроить вручную, как это.