Как поместить бутстрап 4 столбца в каждой строке в цикл foreach - PullRequest
Новая
       10

Как поместить бутстрап 4 столбца в каждой строке в цикл foreach

0 голосов
/ 07 июня 2019

Здесь я пытаюсь разместить 4 столбца в каждом ряду строки boostrap.Но проблема в том, что это все столбцы в одной строке.

Ниже мой код 

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

1 Ответ

1 голос
/ 07 июня 2019

Попробуйте, если я правильно понял, вам нужно создать строку для 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>
...