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

Question

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

Sop*_*ing 5 html javascript css jquery twitter-bootstrap

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Wis*_*abs 7

只是交换的位置.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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，11 月前
查看次数：	8969 次
最近记录：	9 年，11 月前