如何更改Bootstrap面板的折叠方向

Question

如何更改Bootstrap面板的折叠方向

javascriptjqueryhtmlcsstwitter-bootstrap

6

我有一个广为人知的基本可折叠面板，其代码如下。我通过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>

- SophisticatedUndoing

你能告诉我们更多关于你尝试过的内容吗？也许有人可以解释为什么这些尝试失败了，从而使问题和答案更有用！ - PJTraill

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Domain · Accepted Answer

只需要交换 .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>