c# - Foreach输出成两列cshtml

Question

我当前的代码在一列中显示输出...我希望它在两列中显示输出。我应该使用 flex grid 之类的东西还是有其他方法？

<div class="col-12 box-container">
     <div class="col-6">
       @foreach (var s in Model.StatusVM
       .Where(a => a.subHtmlID == x.HtmlID)
       .OrderBy(a => a.IDName)
       .ThenBy(a => a.SortOrder)
       .ThenBy(a => a.HID))
       {
           @Html.Partial("_MusicRow", s)
       }
     </div>
</div>

当前输出看起来像这样......

item 1
item 2
item 3
item 4

<div class="col-12 box-container">
     <div class="col-6">
      <a class="status-row" href="#">item 1</a>
      <a class="status-row" href="#">item 2</a>
      <a class="status-row" href="#">item 3</a>
      <a class="status-row" href="#">item 4</a>
     </div>
</div>

努力实现

item 1   item 2
item 3   item 4

Answer 1

使用 bootstrap 本身(如果你想轻松地做的话)。使用嵌套 Cols , 如果你传递一个 <div class="col-6"></div>围绕您的局部 View ，结果将得到满足。

所以:

<div class="row box-container">
    <div class="col-6">
        <div class="row">

            @foreach (var s in Model.StatusVM
            .Where(a => a.subHtmlID == x.HtmlID)
            .OrderBy(a => a.IDName)
            .ThenBy(a => a.SortOrder)
            .ThenBy(a => a.HID))
            {
                <div class="col-6">
                    @Html.Partial("_MusicRow", s)
                </div>
            }
        </div>
    </div>
</div>