foreach输出成两列cshtml

Question

我当前的代码在一列中显示输出...我希望它在两列中显示输出。我应该使用像弹性网格这样的东西还是有其他方法？

<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 本身（如果你想轻松地做到这一点）。使用 Nested Cols，如果你传递一个<div class="col-6"></div>围绕你的部分视图的结果将得到满足。所以：<div class="row box-container">&nbsp; &nbsp; <div class="col-6">&nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @foreach (var s in Model.StatusVM&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .Where(a => a.subHtmlID == x.HtmlID)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .OrderBy(a => a.IDName)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .ThenBy(a => a.SortOrder)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .ThenBy(a => a.HID))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-6">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; @Html.Partial("_MusicRow", s)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>

Answer 2

你的代码表明你正在使用 Bootstrap，如果这是正确的，那么就有一个愚蠢的错误。将该父类从 / 更改col-12为row/ row col-12。<div class="row box-container">&nbsp;<div class="col-6">&nbsp; &nbsp;@foreach (var s in Model.StatusVM&nbsp; &nbsp;.Where(a => a.subHtmlID == x.HtmlID)&nbsp; &nbsp;.OrderBy(a => a.IDName)&nbsp; &nbsp;.ThenBy(a => a.SortOrder)&nbsp; &nbsp;.ThenBy(a => a.HID))&nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp;@Html.Partial("_MusicRow", s)&nbsp; &nbsp;}&nbsp;</div>

Answer 3

我不确定您的代码背后的 CSS 代码，但通过您的标记，我们可以使其如下：.box-container .col-6 {&nbsp; display: flex;&nbsp; flex-wrap: wrap; /* Wrap to next row after occupying width of 50% declared below */}.box-container .col-6 > a {&nbsp; flex-basis: 50%;}<div class="col-12 box-container">&nbsp; <div class="col-6">&nbsp; &nbsp; <a class="status-row" href="#">item 1</a>&nbsp; &nbsp; <a class="status-row" href="#">item 2</a>&nbsp; &nbsp; <a class="status-row" href="#">item 3</a>&nbsp; &nbsp; <a class="status-row" href="#">item 4</a>&nbsp; &nbsp; <a class="status-row" href="#">item 5</a>&nbsp; &nbsp; <a class="status-row" href="#">item 6</a>&nbsp; &nbsp; <a class="status-row" href="#">item 7</a>&nbsp; &nbsp; <a class="status-row" href="#">item 8</a>&nbsp; </div></div>