bootstrap - 网格系统 - 连续折叠/展开 1 个项目
Posted
技术标签:
【中文标题】bootstrap - 网格系统 - 连续折叠/展开 1 个项目【英文标题】：bootstrap - grid-system - collapse/expand only 1 item in a row 【发布时间】：2018-02-07 22:27:00 【问题描述】：我在一个网格系统上开发，其中有几个连续折叠的项目。 点击标题或缩略图时触发折叠。
现在的问题是：当我展开一行中的一项时，其他所有项也会自动展开，但展开后的文本仅显示在当前项中。 我只想扩展一项，其余的在网格系统中自行排序：
这个 img 显示了它当前的行为：
这就是我希望它的行为方式：
这是我当前代码的一个小提琴： Fiddle
1 项的 html 代码（只是因为小提琴需要一些代码）：
<div class="flex-container">
<div id="item1" class ="item">
<a data-toggle="collapse" href="#collapse-1" class="collapsed" aria-expanded="false">
<div class="item-body">
<div class="image">
<img src="https://www.lycatv.tv/img/web/avatar_1.png" title="Dummy">
</div>
<div class="content">
<h3>TEST</h3>
<h4>Testmodell 0</h4>
<div class="btn-group-vertical buttons" role="group" aria-label="...">
<button type="button" class="btn btn-default btn-xs"><i class="fa fa-pencil" aria-hidden="true"></i></button>
<button type="button" class="btn btn-default btn-xs"><i class="fa fa-info" aria-hidden="true"></i></button>
</div>
</div>
</div>
</a>
<div class="item-footer collapse" id="collapse-1" aria-expanded="false" style="height: 11px;">
<p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 1</p>
<p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 2</p>
<p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 3</p>
</div>
</div>
</div>
提前致谢。
编辑： 任何更新？ :)
【问题讨论】：
这可能对 CSS Grid 是可行的，否则你需要一个脚本来解决这个问题。如果 CSS Grid 是一个选项，请将css-grid 添加到您的标签列表中
我对一切都持开放态度。我也听说过 masonry 小部件，但我没有这方面的经验。
好的，我也用脚本更新了你的标签列表，现在就等着看
【参考方案1】：
由于flex，您正面临这个问题。要解决此问题，您必须使用其他选项，例如：
body .flex-container
display:block;
.item
background-color: white;
border:solid 1px #000;
margin: 5px;
cursor: pointer;
width: 100%;
.item .item-body
display: block;
position: relative;
height : 50px;
.item .item-footer
border-top: 1px solid #000;
position: relative;
padding-top: 10px;
padding-left: 10px;
.item .item-body .image
display: block;
float: left;
vertical-align: middle;
position: relative;
.item .item-body .image img
width: 50px;
padding-top: 3px;
.item .item-body .content
display: block;
float: left;
padding: 0 ;
margin-left: 10px;
margin-right: 15px;
.item .item-body .content h3
font-size: 1.1em;
margin-top: 8px;
margin-bottom: 1px;
.item .item-body .content h4
font-size: 1em;
margin-top: 1px;
margin-bottom: 1px;
.item .item-body .content .buttons
display: block;
position: absolute;
top: 3px;
right: 5px;
.item a
text-decoration: none;
color: black;
.flex-container
-js-display: flex;
display: flex;
flex-wrap: wrap;
height: 100%;
min-height: 100px;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div id="item1" class ="item">
<a data-toggle="collapse" href="#collapse-1" class="collapsed" aria-expanded="false">
<div class="item-body">
<div class="image">
<img src="https://www.lycatv.tv/img/web/avatar_1.png" title="Dummy">
</div>
<div class="content">
<h3>TEST</h3>
<h4>Testmodell 0</h4>
<div class="btn-group-vertical buttons" role="group" aria-label="...">
<button type="button" class="btn btn-default btn-xs"><i class="fa fa-pencil" aria-hidden="true"></i></button>
<button type="button" class="btn btn-default btn-xs"><i class="fa fa-info" aria-hidden="true"></i></button>
</div>
</div>
</div>
</a>
<div class="item-footer collapse" id="collapse-1" aria-expanded="false" style="height: 11px;">
<p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 1</p>
<p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 2</p>
<p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 3</p>
</div>
</div>
<div id="item2" class ="item">
<a data-toggle="collapse" href="#collapse-2" class="collapsed" aria-expanded="false">
<div class="item-body">
<div class="image">
<img src="https://www.lycatv.tv/img/web/avatar_1.png" title="Dummy">
</div>
<div class="content">
<h3>TEST</h3>
<h4>Testmodell 1</h4>
<div class="btn-group-vertical buttons" role="group" aria-label="...">
<button type="button" class="btn btn-default btn-xs"><i class="fa fa-pencil" aria-hidden="true"></i></button>
<button type="button" class="btn btn-default btn-xs"><i class="fa fa-info" aria-hidden="true"></i></button>
</div>
</div>
</div>
</a>
<div class="item-footer collapse" id="collapse-2" aria-expanded="false" style="height: 11px;">
<p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 1</p>
<p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 2</p>
<p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 3</p>
</div>
</div>
<div id="item3" class ="item">
<a data-toggle="collapse" href="#collapse-3" class="collapsed" aria-expanded="false">
<div class="item-body">
<div class="image">
<img src="https://www.lycatv.tv/img/web/avatar_1.png" title="Dummy">
</div>
<div class="content">
<h3>TEST</h3>
<h4>Testmodell 2</h4>
<div class="btn-group-vertical buttons" role="group" aria-label="...">
<button type="button" class="btn btn-default btn-xs"><i class="fa fa-pencil" aria-hidden="true"></i></button>
<button type="button" class="btn btn-default btn-xs"><i class="fa fa-info" aria-hidden="true"></i></button>
</div>
</div>
</div>
</a>
<div class="item-footer collapse" id="collapse-3" aria-expanded="false" style="height: 11px;">
<p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 1</p>
<p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 2</p>
<p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 3</p>
</div>
</div>
<div id="item4" class ="item">
<a data-toggle="collapse" href="#collapse-4" class="collapsed" aria-expanded="false">
<div class="item-body">
<div class="image">
<img src="https://www.lycatv.tv/img/web/avatar_1.png" title="Dummy">
</div>
<div class="content">
<h3>TEST</h3>
<h4>Testmodell 3</h4>
<div class="btn-group-vertical buttons" role="group" aria-label="...">
<button type="button" class="btn btn-default btn-xs"><i class="fa fa-pencil" aria-hidden="true"></i></button>
<button type="button" class="btn btn-default btn-xs"><i class="fa fa-info" aria-hidden="true"></i></button>
</div>
</div>
</div>
</a>
<div class="item-footer collapse" id="collapse-4" aria-expanded="false" style="height: 11px;">
<p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 1</p>
<p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 2</p>
<p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 3</p>
</div>
</div>
<div id="item5" class ="item">
<a data-toggle="collapse" href="#collapse-5" class="collapsed" aria-expanded="false">
<div class="item-body">
<div class="image">
<img src="https://www.lycatv.tv/img/web/avatar_1.png" title="Dummy">
</div>
<div class="content">
<h3>TEST</h3>
<h4>Testmodell 4</h4>
<div class="btn-group-vertical buttons" role="group" aria-label="...">
<button type="button" class="btn btn-default btn-xs"><i class="fa fa-pencil" aria-hidden="true"></i></button>
<button type="button" class="btn btn-default btn-xs"><i class="fa fa-info" aria-hidden="true"></i></button>
</div>
</div>
</div>
</a>
<div class="item-footer collapse" id="collapse-5" aria-expanded="false" style="height: 11px;">
<p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 1</p>
<p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 2</p>
<p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 3</p>
</div>
</div>
<div id="item6" class ="item">
<a data-toggle="collapse" href="#collapse-6" class="collapsed" aria-expanded="false">
<div class="item-body">
<div class="image">
<img src="https://www.lycatv.tv/img/web/avatar_1.png" title="Dummy">
</div>
<div class="content">
<h3>TEST</h3>
<h4>Testmodell 5</h4>
<div class="btn-group-vertical buttons" role="group" aria-label="...">
<button type="button" class="btn btn-default btn-xs"><i class="fa fa-pencil" aria-hidden="true"></i></button>
<button type="button" class="btn btn-default btn-xs"><i class="fa fa-info" aria-hidden="true"></i></button>
</div>
</div>
</div>
</a>
<div class="item-footer collapse" id="collapse-6" aria-expanded="false" style="height: 11px;">
<p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 1</p>
<p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 2</p>
<p><i class="fa fa-ravelry" aria-hidden="true"></i> Dummy 3</p>
</div>
</div>
</div>您也可以查看更新后的Single column fiddle
或者你可以像这样 Two column fiddle 将隐藏的 div 设为绝对值
【讨论】：
感谢您的快速回复。我已经考虑过这样的解决方案。但问题是，我要管理大约 30 个项目 - 因此我需要连续处理几个项目，否则会让人感到困惑。知道如何实现吗？ 几乎是想要的结果。我只面临这个解决方案的另一个问题。用户无法阅读，例如第 1 项和第 3 项的信息，因为内容重叠。我真的很喜欢类似网格布局的想法，其中项目根据可用的垂直空间放置在最佳位置。 （如第二张图片）。但我不知道是否有一个简单的解决方案。以上是关于bootstrap - 网格系统 - 连续折叠/展开 1 个项目的主要内容，如果未能解决你的问题，请参考以下文章