时间戳

首页 > 解决方案 > 如何在foreach循环的每一行中放置引导4列

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

问题描述

在这里，我试图在 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" alt="" /></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>

标签： c#asp.net-core-2.0razor-pages

解决方案

试试这个，如果我猜对了，你需要为 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" alt="" /></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>

推荐阅读