Boostrap 4 динамически размещает карту (информация извлекается из БД) - PullRequest
Новая
       26

Boostrap 4 динамически размещает карту (информация извлекается из БД)

0 голосов
/ 28 января 2020

Я работаю в CMS (системе управления контентом).

Я застрял в той части, где я извлекаю информацию БД на страницу, где информация помещается в Bootstrap 4 класс карт. Проблема в том, что когда я вынимаю одну карту, последняя позиция карты не сдвигается вверх.

По сути, код html равен 

<div class="row">
    <div class="col-md-6">
        @for (int i = 0; i < Model.Count(); i += 2)
        {
            if (Model[i].DisplayStatus == true)
            {
                <div class="card card-body text-center">
                    <div class="card-title">
                        <h2 class="font-weight-bold">@Model[i].Autors</h2>
                    </div>

                    <div class="card-text">
                        <img src="@Url.Content(Model[i].ImagePath)" class="img-fluid" /><br /><br />
                        <h4>@Model[i].Teksts</h4>
                    </div>
                    <a href="/Home/MoreInfo?id=@Model[i].ID" class="btn btn-info">More info <i class="fa fa-info"></i></a>
                </div><br />
            }
        }
    </div>

    <div class="col-md-6">
        @for (int i = 1; i < Model.Count(); i += 2)
        {
            if (Model[i].DisplayStatus == true)
            {
                <div class="card card-body text-center">
                    <div class="card-title">
                        <h2 class="font-weight-bold">@Model[i].Autors</h2>
                    </div>

                    <div class="card-text">
                        <img src="@Url.Content(Model[i].ImagePath)" class="img-fluid" /><br /><br />
                        <h4>@Model[i].Teksts</h4>
                    </div>
                    <a href="/Home/MoreInfo?id=@Model[i].ID" class="btn btn-info">More info <i class="fa fa-info"></i></a>
                </div><br />
            }
        }
    </div>
</div>

Что я хочу достичь, так это карты будут выравниваться динамически. Если одно место пусто (DisplayStatus == false), его занимает следующая карта и так далее. В основном динамическое c выравнивание карт.

Заранее спасибо!

1 Ответ

0 голосов
/ 28 января 2020

Вы должны поместить внутрь оператора if

https://getbootstrap.com/docs/4.1/layout/grid/#column -wrapping 

<div class="row">
        @for (int i = 0; i < Model.Count(); i ++)
        {
            if (Model[i].DisplayStatus == true)
            {
            <div class="col-md-6">
                <div class="card card-body text-center">
                    <div class="card-title">
                        <h2 class="font-weight-bold">@Model[i].Autors</h2>
                    </div>

                    <div class="card-text">
                        <img src="@Url.Content(Model[i].ImagePath)" class="img-fluid" /><br /><br />
                        <h4>@Model[i].Teksts</h4>
                    </div>
                    <a href="/Home/MoreInfo?id=@Model[i].ID" class="btn btn-info">More info <i class="fa fa-info"></i></a>
                </div><br />
            </div>
            }
        }
</div>
...