代码之家 › 专栏 › 技术社区 › learner2017

多个HTML选择-不展开

bootstrap-4 html

learner2017 · 技术社区 · 6 年前

我的页面中有多个选择元素。但第一个(数学)没有展开(单击时它可能会第一次展开,但如果再次单击,它将停止工作!).

我试过谷歌Chrome和Safari浏览器。此外,还验证了HTML。不知道怎么了!

请检查我的密码 https://www.w3schools.com/code/tryit.asp?filename=FZBCNDGK5B9A

2 回复 | 直到 6 年前

brooksrelyt Ozal Zarbaliyev 6 年前

我觉得你的填充物太多了,你的控件掉到了盒子外面。

尝试在chrome中打开它,右键单击其中一个选项,然后选择“inspect”,这样您就可以在开发人员工具中看到它,这可能会让您更好地了解问题所在。

你的控制空间太小了。试着换一些 col-1 到 col-4 可能会有所帮助。

Naga Sai A 6 年前

为达到预期效果,请为每行中的所有分隔提供适当的列间距。

首先调整col-6的收割台分隔间距,class=“col-6”
和class=“col-6”在每个学生行内平均分配

问题: 分隔符重叠导致下拉列表中的数学选择问题

<!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>