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 1item 2item 3item 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 2item 3   item 4

Answer 1

使用 bootstrap 本身（如果你想轻松地做到这一点）。使用 Nested Cols，如果你传递一个<div class="col-6"></div>围绕你的部分视图的结果将得到满足。

所以：

<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>

Answer 2

你的代码表明你正在使用 Bootstrap，如果这是正确的，那么就有一个愚蠢的错误。将该父类从 / 更改col-12为row/ row col-12。

<div class="row 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>

Answer 3

我不确定您的代码背后的 CSS 代码，但通过您的标记，我们可以使其如下：

.box-container .col-6 {

  display: flex;

  flex-wrap: wrap; /* Wrap to next row after occupying width of 50% declared below */

}

.box-container .col-6 > a {

  flex-basis: 50%;

}

<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>

    <a class="status-row" href="#">item 5</a>

    <a class="status-row" href="#">item 6</a>

    <a class="status-row" href="#">item 7</a>

    <a class="status-row" href="#">item 8</a>

  </div>

</div>