英文:
Bootstrap 5 rounded-circle class not working
问题
<!-- language: lang-css -->
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
background: #f1f2fa;
font-family: 'Poppins', sans-serif;
}
hr {
border: 1.5px solid #0b5ed7
}
.crd {
background: #f1f2fa;
transition: all;
}
.crd:hover {
background: #0b5ed7;
color: #fff;
transition: 0.5s;
}
.card img {
margin: auto;
}
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
background: #f1f2fa;
font-family: 'Poppins', sans-serif;
}
hr {
border: 1.5px solid #0b5ed7
}
.crd {
background: #f1f2fa;
transition: all;
}
.crd:hover {
background: #0b5ed7;
color: #fff;
transition: 0.5s;
}
.card img {
margin: auto;
}
<!-- language: lang-html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Your awesome title: </title>
<meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />
<link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="./index.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="/_bridgetown/static/js/main.96ffffaea92690057bfb.js" defer></script>
</head>
<body>
<!-- OUR CLIENTS SECTION START -->
<section class="bg-dark text-center">
<div class="container">
<div class="row text-white py-5">
<h2 class="display-6">100's of Companies have Switched to Our Company</h2>
<div class="col-12">
<div class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-lg-4">
<div class="card bg-light text-dark">
<img src="./assets/favicon-Icon Only [G]_76x76.png" class="img-fluid rounded-circle mt-4" />
<div class="card-body">
<p class="lead text-center text-muted mt-4">John Doe</p>
<p>Sit occaecat amet aute duis occaecat irure ea. Nostrud minim aliqua esse amet. Culpa laborum voluptate culpa excepteur in in ullamco velit aliqua.
</p>
<p class="text-warning">
<i class="fa-solid fa-star fa-1x"></i>
<i class="fa-solid fa-star fa-1x"></i>
<i class="fa-solid fa-star fa-1x"></i>
<i class="fa-solid fa-star fa-1x"></i>
<i class="fa-solid fa-star fa-1x"></i>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- OUR CLIENTS SECTION CLOSE -->
</body>
</html>
<!-- end snippet -->
I am using Bootstrap 5 to make a website and I am currently using it to make a course that displays cards of different people's reviews, but I am trying to use the rounded-circle class on an image but it isn't working, no circle appears around the image. There is supposed to be a rounded circle around the image but for some reason it's not appearing.
This is what it currently looks like 
This is what it's supposed to look like 
Code
Index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Your awesome title: </title>
<meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." />
<link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="./index.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="/_bridgetown/static/js/main.96ffffaea92690057bfb.js" defer></script>
</head>
<body>
<!-- OUR CLIENTS SECTION START -->
<section class="bg-dark text-center">
<div class="container">
<div class="row text-white py-5">
<h2 class="display-6">100's of Companies have Switched to Our Company</h2>
<div class="col-12">
<div class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-lg-4">
<div class="card bg-light text-dark">
<img src="./assets/favicon-Icon Only [G]_76x76.png" class="img-fluid rounded-circle mt-4" />
<div class="card-body">
<p class="lead text-center text-muted mt-4">John Doe</p>
<p>Sit occaecat amet aute duis occaecat irure ea. Nostrud minim aliqua esse amet. Culpa laborum voluptate culpa excepteur in in ullamco velit aliqua.
</p>
<p class="text-warning">
<i class="fa-solid fa-star fa-1x"></i>
<i class="fa-solid fa-star fa-1x"></i>
<i class="fa-solid fa-star fa-1x"></i>
<i class="fa-solid fa-star fa-1x"></i>
<i class="fa-solid fa-star fa-1x"></i>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- OUR CLIENTS SECTION CLOSE -->
</body>
</html>
Index.css
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
background: #f1f2fa;
font-family: 'Poppins', sans-serif;
}
hr {
border: 1.5px solid #0b5ed7
}
.crd {
background: #f1f2fa;
transition: all;
}
.crd:hover {
background: #0b5ed7;
color: #fff;
transition: 0.5s;
}
.card img {
margin: auto;
}
答案1
得分: 1
图像已经被圆角化。您的结果与预期结果的区别在于示例照片的颜色不同，而您的图像与其周围的区域一样是白色。
在以下示例中，我只需将三行代码添加到您的CSS中，以使圆角图像更加明显。
.card img {
width: 76px;
aspect-ratio: 1;
background-color: silver;
}
希望这对您有所帮助。
英文:
The image is rounded. The difference between your result and the intended result is that the example photo has a different color whereas your image is the same white color as the area around it.
In the following example, I only added three lines to your CSS to make the rounded image more apparent.
.card img {
width: 76px;
aspect-ratio: 1;
background-color: silver;
}
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
background: #f1f2fa;
font-family: 'Poppins', sans-serif;
}
hr {
border: 1.5px solid #0b5ed7
}
.crd {
background: #f1f2fa;
transition: all;
}
.crd:hover {
background: #0b5ed7;
color: #fff;
transition: 0.5s;
}
.card img {
margin: auto;
width: 76px;
aspect-ratio: 1;
background-color: silver;
}
<!-- language: lang-html -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- OUR CLIENTS SECTION START -->
<section class="bg-dark text-center">
<div class="container">
<div class="row text-white py-5">
<h2 class="display-6">100's of Companies have Switched to Our Company</h2>
<div class="col-12">
<div class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-lg-4">
<div class="card bg-light text-dark">
<img src="./assets/favicon-Icon Only [G]_76x76.png" class="img-fluid rounded-circle mt-4" />
<div class="card-body">
<p class="lead text-center text-muted mt-4">John Doe</p>
<p>Sit occaecat amet aute duis occaecat irure ea. Nostrud minim aliqua esse amet. Culpa laborum voluptate culpa excepteur in in ullamco velit aliqua.
</p>
<p class="text-warning">
<i class="fa-solid fa-star fa-1x"></i>
<i class="fa-solid fa-star fa-1x"></i>
<i class="fa-solid fa-star fa-1x"></i>
<i class="fa-solid fa-star fa-1x"></i>
<i class="fa-solid fa-star fa-1x"></i>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- OUR CLIENTS SECTION CLOSE -->
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论