我试图练习手风琴。我基于这个组件（go to fiddle here）使用bootstrap 4.虽然我无法重现我试图在这里修复的错误，但在我的页面上这个组件＆＃34;闪烁＆＃34;就在扩展到达终点之前。它是Moodle系统上的一个页面，我无法访问服务器。我只是一个可以使用这些技术修改前端的管理员。我怀疑它可能是与这个特定页面已经存在的样式表上的冲突有关。请检查我的代码。
.spacer {
height: 1em;
}
#competence {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#competence td, #competence th {
border: 1px solid #ddd;
padding: 8px;
}
#competence tr:nth-child(even){background-color: #f2f2f2;}
#competence tr:hover {background-color: #ddd;}
#competence th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<b>
A table
</b>
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<div dir="ltr">
<table id="competence">
<colgroup>
<col width="332">
<col width="129">
<col width="125">
</colgroup>
<tbody style="border-color:black;">
<tr>
<td>
<p dir="ltr">Some text</p>
</td>
<td colspan="2" rowspan="3">
<p dir="ltr">Some text</p>
</td>
</tr>
<tr>
<td>
<p dir="ltr">Some text</p>
</td>
</tr>
<tr>
<td>
<p dir="ltr">Some text</p>
</td>
</tr>
<tr>
<td>
<p dir="ltr">Some text</p>
</td>
<td>
<p dir="ltr">Some text</p>
</td>
<td>
<p dir="ltr">Some text</p>
</td>
</tr>
<tr>
<td>
<p dir="ltr">Some text</p>
</td>
<td colspan="2">
<p dir="ltr">Some text</p>
</td>
</tr>
<tr>
<td>
<p dir="ltr">Some text</p>
</td>
<td colspan="2">
<p dir="ltr">Some text</p>
</td>
</tr>
<tr>
<td>
<p dir="ltr">Some text</p>
</td>
<td colspan="2">
<p dir="ltr">Some text</p>
</td>
</tr>
<tr>
<td>
<p dir="ltr">Some text</p>
</td>
<td>
<p dir="ltr">Some text</p>
</td>
<td>
<p dir="ltr">Some text</p>
</td>
</tr>
<tr>
<td>
<p dir="ltr">Some text</p>
</td>
<td colspan="2">
<p dir="ltr">Some text</p>
</td>
</tr>
<tr>
<td>
<p dir="ltr">Some text</p>
</td>
<td>
<p dir="ltr">Some text</p>
</td>
<td>
<p dir="ltr">Some text</p>
</td>
</tr>
<tr>
<td>
<p dir="ltr">Some text</p>
</td>
<td colspan="2">
<p dir="ltr">Some text</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
有人对此有任何线索吗？
答案 0 :(得分：1)
我对可折叠项目有同样的问题，这在我的情况下是通过在“可折叠”div上放置填充引起的
<div class="collapse pb-3" id="collapseExample">
我解决了从那里删除“pb-3”类并将 pt-3 类放在下面不可折叠的 div 元素中的问题。
答案 1 :(得分：0)
可折叠 div 必须具有“卡片”类并且无填充。
<html>
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="p-5">
<button class="btn btn-primary clickable d-block" aria-controls="accordion"
data-toggle="collapse" data-target="#accordion">Click me!</button>
<div class="card m-0 collapse" id="accordion"
style="background-color:#d7dde3;border-radius:0">
<p class="pl-2">Line 1</p>
<p class="pl-2">Line 2</p>
<p class="pl-2">Line 3</p>
</div>
</div>
</body>
</html>