Question

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

Answer 1

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

如何在bootstrap中更改面板的折叠方向

1 个答案: