如何在foreach循环的每一行中放置引导4列

Posted 2023-03-27

【中文标题】如何在foreach循环的每一行中放置引导4列

【英文标题】：How to put bootstrap 4 columns in each rows in foreach loop

【发布时间】：2019-10-23 05:51:14

【问题描述】：

在这里，我试图在 boostrap 行的每一行中放置 4 列。但问题是它的所有列都在一行中。 下面是我的代码

@model IEnumerable<AlphaWeb.Model.Models.Team>
<div class="row">
    @foreach (var item in Model)
    
        <div class="col-lg-3 col-md-6 col-xs-6">
            <div class="team-item">
                <div class="team-img">
                    <a href="#"><img class="img-fluid" src="~/AlphaAssets/images/team/@item.ImageName"  /></a>
                    <div class="social-icon">
                        <a href="#"><i class="fa fa-facebook"></i></a>
                        <a href="#"><i class="fa fa-twitter"></i></a>
                        <a href="#"><i class="fa fa-google-plus"></i></a>
                        <a href="#"><i class="fa fa-linkedin"></i></a>
                    </div>
                </div>

                <div class="team-body">
                    <h3 class="name">@item.Name</h3>
                    <span class="designation">@item.Designation</span>
                </div>
            </div>
        </div>
    
</div>

【问题讨论】：

我不明白...您希望模型中的每个项目都有一行吗？然后每行有四列？

@Darkonekt 不，假设我们有 8 个项目，然后第一行有 4 个项目，第二行有 4 个项目

在这种情况下，您有 2 个选择：循环中每四个计数 1 个。或 2 更改您的模型，使其由具有包含四个项目的集合的属性的项目组成

我试过你在一个空白页面中编写代码，它可以很好地用于一行中的 4 个项目。你能显示你显示的图像吗？或者你是否检查引导 css 样式是否已正确应用？(.row display: flex; flex-wrap: wrap;)

【参考方案1】：

试试这个，如果我没听错，你需要为 4 列创建行，然后再次创建行。

@for (int i = 0; i < Model.Count; i++)

    if (i > 0 && i % 4 == 0)
    
        @:</div><div class="row">
    
     <div class="col-lg-3 col-md-6 col-xs-6">
            <div class="team-item">
                <div class="team-img">
                    <a href="#"><img class="img-fluid" src="~/AlphaAssets/images/team/@Model[i].ImageName"  /></a>
                    <div class="social-icon">
                        <a href="#"><i class="fa fa-facebook"></i></a>
                        <a href="#"><i class="fa fa-twitter"></i></a>
                        <a href="#"><i class="fa fa-google-plus"></i></a>
                        <a href="#"><i class="fa fa-linkedin"></i></a>
                    </div>
                </div>

                <div class="team-body">
                    <h3 class="name">@Model[i].Name</h3>
                    <span class="designation">@Model[i].Designation</span>
                </div>
            </div>
        </div>