按钮出现，＃more div被隐藏，但是当我单击显示更多按钮时，隐藏的内容不会出现。难道是因为多行？我应该在每张卡上添加折叠吗？我正在使用bootstap4。代码如下：
<div class="text-center">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#more" aria-expanded="false" aria-controls="collapseExample">
Show more
</button>
</div>
<div id="more" class="collapse">
<div class="row text-center">
<div class="col-md-3">
<div class="card">
<img src="projectmages/10.JPG" >
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="card">
<img src="projectmages/11.JPG" >
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="projectmages/7.JPG" >
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="projectmages/13.JPG">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-md-3">
<div class="card">
<img src="projectmages/14.jpg" >
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="card">
<img src="projectmages/15.jpg" >
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="projectmages/16.jpg" >
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="projectmages/17.jpg" >
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-md-3">
<div class="card">
<img src="projectmages/18.jpg" >
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="card">
<img src="projectmages/19.jpg" >
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="projectmages/20.jpg" >
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="projectmages/21.jpg" >
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-md-3">
<div class="card">
<img src="projectmages/22.jpg" alt="Lights" >
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="card">
<img src="projectmages/23.jpg" alt="Nature" >
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="projectmages/24.jpg" alt="Fjords">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="projectmages/25.jpg" alt="Fjords">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-md-3">
<div class="card">
<img src="projectmages/12.JPG" alt="Lights" >
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="card">
<img src="projectmages/27.jpg" alt="Nature" >
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="projectmages/28.jpg" alt="Fjords">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="projectmages/29.jpg" alt="Fjords">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
使用bootstrap v4.4.1和jquery，popper，bootstrap javascript，您的代码可以正常工作。单击按钮时，卡片将折叠并相应地展开。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="text-center">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#more" aria-expanded="false" aria-controls="collapseExample">
Show more
</button>
</div>
<div id="more" class="collapse">
<div class="row text-center">
<div class="col-md-3">
<div class="card">
<img src="projectmages/10.JPG">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="card">
<img src="projectmages/11.JPG">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="projectmages/7.JPG">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="projectmages/13.JPG">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-md-3">
<div class="card">
<img src="projectmages/14.jpg">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="card">
<img src="projectmages/15.jpg">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="projectmages/16.jpg">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="projectmages/17.jpg">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-md-3">
<div class="card">
<img src="projectmages/18.jpg">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="card">
<img src="projectmages/19.jpg">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="projectmages/20.jpg">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="projectmages/21.jpg">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-md-3">
<div class="card">
<img src="projectmages/22.jpg" alt="Lights">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="card">
<img src="projectmages/23.jpg" alt="Nature">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="projectmages/24.jpg" alt="Fjords">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="projectmages/25.jpg" alt="Fjords">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-md-3">
<div class="card">
<img src="projectmages/12.JPG" alt="Lights">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3 ">
<div class="card">
<img src="projectmages/27.jpg" alt="Nature">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="projectmages/28.jpg" alt="Fjords">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<img src="projectmages/29.jpg" alt="Fjords">
<div class="caption">
<p>Lorem ipsum...</p>
</div>
</div>
</div>
</div>