使COL动态占据整个空间

Question

我有一个动态列出页面上的一些内容的应用程序。 所以我们选择一些成就，并创建一个包含 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 免费模板版本。

Answer 1

在这种情况下，这不会按预期工作，因为元素遵循行列分布，并且当两个元素填充一行时，下一个元素一直向下到前两个元素中最长的元素占据的空间并从那里开始。

在这种情况下，您可以使用类似于使用水平砌体布局的同位素。 您可以在 Isotope 的文档上查看更多信息。

如果您仍然喜欢使用引导选项，我建议您为每列定义一个高度并使其可滚动。 这将是视觉上订购它们的最简单方法。