html - 如何使用 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 中的类行，但图像也没有响应。有人可以帮助我吗？

标签： htmlcsstwitter-bootstrapvue.js

Answer 1

在您的图像类中尝试rounded-circle引导类。

解释rounded-circle什么

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