Утро,
Я пытаюсь поместить свой элемент начальной загрузки карты по 3 карты, карты должны быть одинаковой высоты и ширины и иметь промежуток между ними.Например, если у меня есть 7 карт, у меня будет 3 строки по три карты, и последний ряд с одним элементом будет иметь тот же размер, что и карта над ним.
Мой код:
<div class="container pt-2">
<div *ngFor="let g of carMultiArray">
<div class="row">
<div class="col-12">
<div class="card border-0 boxShadow no-padding col-lg-4 col-md-12 col-sm-12 col-xs-12" *ngFor="let t of g">
<a data-toggle="modal" href="'#'+ 'car'+t.Id" class="card-link" [attr.data-target]="'#'+ 'car'+t.Id" style="color:black; text-decoration: none;">
<img class="card-img-top rounded-0" src="{{t.MainImage}}">
</a>
<div class="card-body text-center">
<div class="my-arrow">
<img *ngIf="!t.Verified" src="../../icons/error.png">
<img *ngIf="t.Verified" src="../../icons/checked.png">
</div>
<h5 class="card-title">{{t.Title}} {{t.Kubatura}} {{t.BodyType}}</h5>
<h6 class="card-subtitle mb-2 text-muted">{{t.FuelType}} {{t.GearBox}} {{t.Horsepower}}
{{t.OdometerReading}}</h6>
<a [routerLink]="['/car', t.Id]" class="card-link">Daugiau</a>
<a class="card-link">{{t.City}}</a>
<a class="card-link">{{t.FirstRegistration}} </a>
</div>
</div>
</div>
</div>
</div>
</div>
Мой CSS (хотя это не влияет на проблему):
.boxShadow {
display: inline-block;
vertical-align: middle;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}
.card-body {
position: relative;
}
.my-arrow {
position: absolute;
top: -10%;
right: 10%;
}
.card-img-top {
width: 100%;
height: 17vw;
object-fit: cover;
}
.card{
width: 90%;
}
.no-padding {
padding-left: 0;
padding-right: 0;
}
Проблема, с которой я сталкиваюсь, заключается в том, что с текущим кодом карты не имеют никакого запаса или отступов между ними, когда водин рядКак вы могли заметить, я удалил все отступы в классе .no-padding, как будто есть какие-либо отступы, даже по умолчанию изображения внутри карты уменьшаются, но сами карты этого не делают, и они все еще соприкасаются друг с другом, удаление заполнения приводит к тому, что картывыглядят одинаково и так, как они предполагают, однако между ними нет места, добавляя поля, любое поле, толкает карту 3 на новую строку.
Если я помещу элементы в группу картвместо того, чтобы помещать его в строки и столбцы, в результате между ними не будет пробела, добавление некоторых снова нарушает сетку.Помещение в колоду карт приводит к тому, что последняя карта подряд занимает все место в последнем ряду, пытаясь установить ширину карт в колоде, по какой-то причине, когда элементы имеют 33%или 30% имеют разную ширину, например, 3 вышеуказанные карты будут иметь одинаковую ширину, однако один сильфон будет по-прежнему немного шире.
Добавление карт в столбцы карт приведет к тому, чтокарты разных высот, попытка сделать это одинаково приведет к тому, что изображения на картах не будут совмещаться друг с другом.
При добавлении всего, что вы видите сейчас в коде, в строке, а затем в столбце 12позволяет обрабатывать все и так, как я хочу, он удаляет интервал между карточками, и, как я уже сказал, если добавить поле, он выталкивает последнюю 3-ю карточку в новую строку, если добавление отступа становится меньше, чем карточка.
КакЯ достиг желаемого результата?
Надеюсь, это имеет смысл, если нет, спросите.