作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试为模拟“食谱应用程序”构建响应式 Web 界面。目前我正在使用 bootstrap 4,但在自定义我的卡片元素以匹配我的线框时遇到了麻烦。
线框卡:https://imgur.com/a/XQHaltk
浏览器中的当前卡片:https://imgur.com/a/kqmBGq4
我已经设法使用自定义 css“修复”了我的卡片图像的边框半径
.img-rounded{
border-radius: 20%;
}
<div class="card" style="width: 18rem;">
<img src="./assets/img/1.jpg" class="card-img-top " alt="Jelo 1">
<div class="card-body">
<h5 class="card-title text-center">Recipe name</h5>
<p class="card-text mb-4">Some quick example text to build on the Recipe name and make up the bulk of the card's content.</p>
<div class="container mb-2">
<a href="#" class="btn btn-primary rounded-pill" style="background-color: #32BF84;">Open</a>
<a href="#" class="btn btn-primary rounded-pill" style="background-color: #32BF84;">Edit</a>
<a href="#" class="btn btn-primary rounded-pill" style="background-color: #32BF84;">Delete</a>
</div>
</div>
</div>
最佳答案
它很简单,只能通过简单的 CSS 来实现。
正如您添加的 border-radius
对于图像,您必须将相同的内容添加到也包含内容和图像的父元素中...
假设您有 <div class="card">
,里面有 <div class="content">
,然后你就有了你的形象,
所以请尝试添加相同的 border-radius
至 <div class="content">
以及。它应该为您解决问题。
关于html - 如何在 Bootstrap 4 中使卡片(正文和图像)的 Angular 变圆?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62322171/
COW 不是奶牛,是 Copy-On-Write 的缩写,这是一种是复制但也不完全是复制的技术。 一般来说复制就是创建出完全相同的两份,两份是独立的: 但是,有的时候复制这件事没多大必要
我是一名优秀的程序员,十分优秀!