Выбор нескольких HTML - не расширяется - PullRequest
Новая
       1

Выбор нескольких HTML - не расширяется

0 голосов
/ 18 января 2019

У меня есть несколько элементов выбора на моей странице.Но первый (математический) не расширяется (он может расшириться в первый раз при нажатии, но если вы нажмете снова, он перестанет работать!).

Я пробовал браузер Google Chrome и Safari.Также проверен HTML.Не уверен, что не так!

Пожалуйста, проверьте мой код на https://www.w3schools.com/code/tryit.asp?filename=FZBCNDGK5B9A

Ответы [ 2 ]

0 голосов
/ 18 января 2019

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

Попробуйте открыть его в Chrome, щелкнуть правой кнопкой мыши на одном из селекторов и выбрать «Осмотреть», чтобы увидеть его на инструментах разработчика, что, вероятно, даст вам лучшее представление о том, в чем проблема.

Вы слишком мало места для своих элементов управления. Попробуйте изменить некоторые из этих col-1 на col-4, это может помочь.

0 голосов
/ 18 января 2019

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

  1. Сначала отрегулируйте расстояние между заголовками div-столбца col-6, class = "col-6"
  2. И class = "col-6" внутри каждого студенческого ряда, чтобы разделить поровну

Проблема: перекрытие div, вызывающее проблему выбора Math из выпадающего списка 

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="description" content="">
      <meta name="author" content="">
      <meta name="google" content="notranslate">
      <title>Title</title>
      <!-- Bootstrap Core CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      <!-- Custom CSS -->
   </head>
   <body>
      <div class="container-fluid">
         <div class="row">
            <div class="col-12">
            </div>
         </div>
         <div class="row">
            <div class="col-12"><br></div>
         </div>
         <div class="row">
            <div class="col-12">
               <div class="d-flex align-items-center">
                  <div class="container">
                     <br/><br/><br/>
                     <div class="container">
                        <div class="row align-items-center">
                        </div>
                        <div class="row">
                           <div class="col-2"></div>
                           <div class="col-6">
                              <div class="row">
                                 <div class="col-1">Math</div>
                                 <div class="col-2"></div>
                                 <div class="col-1">Science</div>
                              </div>
                           </div>
                        </div>
                        <div class="row ">
                           <div class="col-2">
                              Student1
                           </div>
                           <div class="col-3">
                              <div class="row">
                                 <div class="col-6">
                                    <div>
                                       <select name="name_student1_math" id="id_student1_math">
                                          <option value="na">N/A</option>
                                          <option value="1" >1</option>
                                          <option value="2" selected >2</option>
                                          <option value="3" >3</option>
                                          <option value="4" >4</option>
                                       </select>
                                    </div>
                                 </div>
                                 <div class="col-1"></div>
                                 <div class="col-3">
                                    <div>
                                       <select name="name_student1_science" id="id_student1_science">
                                          <option value="na">N/A</option>
                                          <option value="1" >1</option>
                                          <option value="2" >2</option>
                                          <option value="3" >3</option>
                                          <option value="4" selected >4</option>
                                          <option value="5" >5</option>
                                          <option value="6" >6</option>
                                          <option value="7" >7</option>
                                          <option value="8" >8</option>
                                          <option value="9" >9</option>
                                       </select>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                        <div class="row ">
                           <div class="col-2">
                              Student2
                           </div>
                           <div class="col-3">
                              <div class="row">
                                 <div class="col-6">
                                    <div>
                                       <select name="name_student2_math" id="id_student2_math">
                                          <option value="na">N/A</option>
                                          <option value="1" >1</option>
                                          <option value="2" selected >2</option>
                                          <option value="3" >3</option>
                                          <option value="4" >4</option>
                                       </select>
                                    </div>
                                 </div>
                                 <div class="col-1"></div>
                                 <div class="col-3">
                                    <div>
                                       <select name="name_student2_science" id="id_student2_science">
                                          <option value="na">N/A</option>
                                          <option value="1" >1</option>
                                          <option value="2" >2</option>
                                          <option value="3" >3</option>
                                          <option value="4" selected >4</option>
                                          <option value="5" >5</option>
                                          <option value="6" >6</option>
                                          <option value="7" >7</option>
                                          <option value="8" >8</option>
                                          <option value="9" >9</option>
                                       </select>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...