我當前的代碼在一列中顯示輸出...我希望它在兩列中顯示輸出。我應該使用像彈性網(wǎng)格這樣的東西還是有其他方法？<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>試圖實現(xiàn)item 1 item 2item 3 item 4
3 回答
蝴蝶刀刀
TA貢獻1801條經(jīng)驗 獲得超8個贊
使用 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>
一只斗牛犬
TA貢獻1784條經(jīng)驗 獲得超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>
縹緲止盈
TA貢獻2041條經(jīng)驗 獲得超4個贊
我不確定您的代碼背后的 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>
- 3 回答
- 0 關注
- 205 瀏覽
添加回答
舉報
0/150
提交
取消