html - 使COL动态占据整个空间
问题描述
我有一个动态列出页面上的一些内容的应用程序。所以我们选择一些成就,并创建一个有 1 到 X 个成就的部分,在这个页面上,它们使用 col-md-x 列出。
我想使用 col-md-6 大小,因为我有一些动态元素,我需要一些空间来展示它。
但我的问题是,我想让列使用空白空间,例如这张图片:
'informe um nome2' 部分下方的红色区域未被占用,但我想在此部分下方显示第三个 'informe um nome3' 并使用可用空间。
这是我当前的代码:
<div class="row col-md-12">
@foreach (var item in Model)
{
<div class="col-md-6" style="margin-bottom:20px">
<div class="card">
@if (item.SectionHeader != null)
{
<div class="card-header text-center" style="height: 120px; background-image: url('@item.SectionHeader.ImageURL'); background-size:cover; color:black">
@item.SectionName <a title="Renomear" ng-click="Rename(@item.SectionID)"><i class="fa fa-xs fa-clipboard" style="cursor:pointer"></i></a> <a title="Baixar arquivo da seção" ng-click="DownloadFiles(@item.SectionID, false)"><i class="fa fa-xs fa-download" style="cursor:pointer; color:green"></i></a> <a title="Apagar seção" ng-click="Delete(@item.SectionID)"><i class="fa fa-xs fa-trash" style="cursor:pointer; color:red"></i></a>
</div>
}
else
{
<div class="card-header text-center">
@item.SectionName <a title="Editar" href="@Url.Action("EditSection", "Guides", new { sectionID = item.SectionID })"><i class="fa fa-xs fa-edit" style="cursor:pointer; color:orange"></i></a> <a title="Renomear" ng-click="Rename(@item.SectionID)"><i class="fa fa-xs fa-clipboard" style="cursor:pointer"></i></a> <a title="Baixar arquivo da seção" ng-click="DownloadFiles(@item.SectionID, false)"><i class="fa fa-xs fa-download" style="cursor:pointer; color:green"></i></a> <a title="Apagar seção" ng-click="Delete(@item.SectionID)"><i class="fa fa-xs fa-trash" style="cursor:pointer; color:red"></i></a>
</div>
}
<div class="card-body">
@foreach (var chievo in item.GameAchievements.OrderBy(f => f.SectionOrder.HasValue ? f.SectionOrder : f.AchievementID))
{
<div class="achievement" id="@chievo.AchievementID" style="margin-top:10px; margin-bottom:10px; z-index:1; height:60px">
<ul style="list-style:none; margin-top:20px; padding-left:0px" id="@chievo.AchievementID">
<img src="@chievo.Icon" style="float:left" />
<b> @chievo.DisplayName</b>
<br />
@if (string.IsNullOrEmpty(chievo.Description))
{
<i class="fa fa-edit" style="cursor:pointer" ng-click="OpenModal(@chievo.AchievementID)"></i>
}
else
{
<i>@chievo.Description</i>
}
<div style="float:right" class="text-center">
<a title="Alterar Dificuldade" ng-click="ChangeDifficulty(@chievo.AchievementID)"><i class="fa fa-xs fa-star" style="cursor:pointer; margin-left:10px; color:orange"></i></a>
<a title="Remover da Seção" ng-click="RemoveFromSection(@chievo.AchievementID)"><i class="fa fa-xs fa-trash-alt" style="cursor:pointer; margin-left:10px; color:red"></i></a>
</div>
@if (chievo.Difficulty != null)
{
<img src="@chievo.Difficulty.DifficultyImage" style="float:right; width:32px" />
}
</ul>
</div>
if (item.SectionDivisor != null && (item.IndividualDivisor.HasValue && item.IndividualDivisor.Value == true))
{
<div class="text-center">
<img src="@item.SectionDivisor.DivisorImageURL" />
</div>
}
}
@if (item.SectionDivisor != null && (item.IndividualDivisor.HasValue && item.IndividualDivisor.Value == false))
{
<div class="text-center" style="margin-top:20px">
<img src="@item.SectionDivisor.DivisorImageURL" />
</div>
}
</div>
</div>
</div>
}
</div>
所以,基本上,我需要帮助使列自动对齐和自动填充。我正在使用 sb admin 2 免费模板版本。
解决方案
在这种情况下,这将无法按预期工作,因为元素遵循行列分布,并且当两个元素填充一行时,下一个元素一直向下到前两个元素中最长的元素占据的空间并从那里开始。
在这种情况下,您可以使用类似于使用水平砌体布局的同位素。您可以在 Isotope 的文档上查看更多信息。
如果您仍然喜欢使用引导选项,我建议您为每列定义一个高度并使其可滚动。这将是视觉上订购它们的最简单方法。
推荐阅读
- jpa - JPA:SQL 脚本的级联应该反映在实体中吗?
- android - LayoutParams setMargins 不适用于 API 23 及更低版本
- gzip - 损坏的 GZip 文件显示为数据且无法解压缩
- python - Pytorch:当就地操作遵循某些函数时,梯度计算失败
- flutter - dart 通用 typedef 函数不是 CupertinoSlidingSegmentedControl 错误的子类型
- c++ - 在构造函数之前初始化值
- javascript - 为什么矩阵会更新两列的索引?
- java - br.read() 如何在读取字符串结束时给出 -1 或 br.read() 究竟是如何工作的?
- android - 谷歌浏览器远程调试没有显示任何东西
- c++ - Windows系统中的C++错误输出