我的页面中有多个选择元素。但是第一个（数学）没有扩展（单击时可能会第一次扩展，但是如果再次单击，它将停止工作！）。
我已经尝试过Google Chrome和Safari浏览器。另外，验证了HTML。不知道出什么问题了！
请在以下位置检查我的代码 https://www.w3schools.com/code/tryit.asp?filename=FZBCNDGK5B9A
答案 0 :(得分：0)
要获得预期的结果，请为每行内的所有div提供适当的col-spacing
问题：div重叠导致从下拉列表中选择数学问题
<!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>
答案 1 :(得分：0)
我认为您提供了过多的填充，而控件却落在了他们的框外。
尝试在Chrome中打开它，然后右键单击所选内容之一，然后选择“检查”，以便可以在开发人员工具上看到它，这可能会让您对问题出在哪里有更好的认识。
您为控件提供的空间太小。尝试将其中一些col-1更改为col-4，可能会有所帮助。