如何使用HTML、CSS、Bootratrap在引导卡中显示扩展面板

Question

我想复制一张像下面的图片中的卡片。我正在使用HTML，CSS，引导。我有一个问题，在创建一个扩展面板，在下面的图片。有人能帮我在代码中创建像下面的图像这样的扩展面板吗？

​

我不知道如何在引导卡中使用HTML、CSS在网络中搜索扩展面板，但是我什么也找不到。请帮帮我。

我的HTML代码：

<div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col-xs-3">
                <button class="btn btn-warning">Submission</button>&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
            <div class="col-sm-5">
                <div class="space">
                    <h6 style="color:red";>KKR - USA</h6><h6><b> - KLA</b></h6>- GJAHR<h6>
                    <p style="font-size:13px;"><b>100</b></p>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="tip">
                    <img src="avatar.png" alt="Avatar" style="width:25px"><p style="font-size:15px">Nivedha S</p>
                    <br/>
                    <img src="avatar.png" alt="Avatar" style="width:25px"><p style="font-size:15px">Jagadeesh Balan</p>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="icon">
                    <i class="fa-li fa fa-check-square">
                    <br>
                    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="heading-2">
                                <h4 class="panel-title">
                                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
                                    </a>
                                </h4>
                            </div>
                            <div id="collapse-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-2">
                                <div class="panel-body">
                                    Text 2
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>

我的CSS代码是

.col-sm-3:not(:last-child) {
    border-right: 1px solid #ccc;
    padding: 12px;
}

.col-xs-3:not(:last-child) {
    border-right: 1px solid #ccc;
}
.col-sm-5:not(:last-child) {
    border-right: 1px solid #ccc;
}
.col-xs-2:not(:last-child) {
    border-right: 1px solid #ccc;
}
h6{
display: inline;
}
.space{

line-height: 2.5;
}
#demo{
background-color: #ccc;

}
.tip p {
    display:inline;
    margin-left:10px;
}
img {
  border-radius: 50%;
}
.icon{
display: inline;

}
.panel-title > a {
  display: block;
  position: relative;
}
.panel-title > a:after {
  content: "\f078"; /* fa-chevron-down */
  font-family: 'FontAwesome';
  position: absolute;
  right: 0;
}
.panel-title > a[aria-expanded="true"]:after {
  content: "\f077"; /* fa-chevron-up */
}

Answer 1

Bootstrap中的塌陷分量是您需要的。您实现了错误，因为包含额外详细信息的div应该在主div之外。

正如Boostrap崩溃文档的第一行所解释的那样：

.collapse.show显示内容

因此，如果您不愿意在单击按钮时隐藏/显示整个div，则您的内容必须位于其他地方。

我在您的主div中添加了以下内容：

<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Open details
  </a>

然后，下面的div在外面：

<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

这是一支工作笔！