Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/node.js/35.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
C# 如何在foreach循环的每行中放置引导4列_C#_Asp.net Core 2.0_Razor Pages - Fatal编程技术网

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

C# 如何在foreach循环的每行中放置引导4列,c#,asp.net-core-2.0,razor-pages,C#,Asp.net Core 2.0,Razor Pages,在这里,我试图在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="t

在这里,我试图在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>
@model IEnumerable
@项目名称
@项目.名称
}

试试这个,如果我没记错的话,您需要为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>
@for(int i=0;i0&&i%4==0)
{
@:
}
@型号[i].名称
@型号[i].名称

我不明白……你想在模型中每项有一行?然后每行有四列?@Darkonekt不,假设我们有8项,然后第一行有四项,第二行有另外四项。在这种情况下,你有两个选择:1在循环中每四项计数一次。或2更改模型,使其由具有属性的项组成rty包含四个项目的集合我尝试在一个空白页中编写代码,它可以在一行中运行4个项目。您可以显示显示的图像吗?或者您是否检查引导css样式是否已正确应用?(行{display:flex;flex wrap:wrap;})