как создать две строки с адаптивными изображениями с bootstrap 4

Question

Я хочу создать карточные игры с bootstrap 4 и Vue, но я не являюсь хорошим разработчиком внешнего интерфейса. Я хотел бы создать две строки с гибкими округлыми изображениями внутри, но я не могу этого сделать. Обе строки должны иметь высоту 25%.

Это код моего компонента:

<template>
    <div>
        <div class="row h-25">
            <img src="images/retro.jpg" class="card img-fluid" alt="Responsive image">
            <img src="images/retro.jpg" class="card img-fluid" alt="Responsive image">
            <img src="images/retro.jpg" class="card img-fluid" alt="Responsive image">
        </div>
        <div class="row h-25">
            <img src="images/retro.jpg" class="card img-fluid" alt="Responsive image">
            <img src="images/retro.jpg" class="card img-fluid" alt="Responsive image">
            <img src="images/retro.jpg" class="card img-fluid" alt="Responsive image">
        </div>
    </div>
</template>

Это моя таблица стилей:

.card {
    border-radius: 10%;
}

Изображения правильно округлены, но они не реагируют. Я попытался удалить строку класса в div, но изображения также не реагируют. Кто-нибудь может мне помочь?

Answer 1

Попробуйте rounded-circle bootstrap класс в вашем классе изображений.

Чтобы объяснить, что rounded-circle делает

.rounded-circle {
    border-radius: 50%!important;
}