twitter-bootstrap 如何在引导程序中更改面板的折叠方向
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33756985/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to change collapse direction of a panel in bootstrap
提问by SophisticatedUndoing
I have a well-known basic collapsible panel which its codes mentioned belowed. I changed some properties via css sets like collapse-in and collapse height&width but could not achieve to change collapsing direction. I want to change it towards top opposite to default position. How can I do that? I assure you that I tried several ways but could not solve the issue.
我有一个众所周知的基本可折叠面板，其代码如下所述。我通过 css 设置更改了一些属性，例如折叠和折叠高度和宽度，但无法更改折叠方向。我想将其更改为与默认位置相反的顶部。我怎样才能做到这一点？我向您保证，我尝试了多种方法，但无法解决问题。
<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>
回答by WisdmLabs
Just interchange the positions of .panel-headingand #collapse1.
只是交换的位置.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>