我有一个众所周知的基本可折叠面板，其代码如下所述。我通过 css 集更改了一些属性，例如 collapse-in 和 collapse height&width，但无法实现更改折叠方向。我想将其更改为与默认位置相反的顶部。我怎样才能做到这一点？我向您保证，我尝试了多种方法但无法解决问题。
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
最佳答案
只需交换 .panel-heading 和 #collapse1 的位置即可。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel-group">
<div class="panel panel-default">
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
</div>
</div>
</body>
</html>关于javascript - 如何在 Bootstrap 中更改面板的折叠方向，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33756985/