我正在尝试使用 Bootstrap 4 和一些自定义 CSS 样式来实现这一点
这是我到目前为止所拥有的:
<div class="container">
<div class="row">
<div class="col-4">
<div class="card">
<div class="card-header d-flex justify-content-around">
<div class="card-icon">
<i class="fa fa-exclamation-circle" aria-hidden="true"></i>
</div>
<div class="card-category">
<p>Used Space</p>
<h3>49/50</h3>
</div>
</div>
<div class="card-body ">
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
</div>
</div>
</div>
我无法得到这个结果,我是 CSS 和 Bootstrap 的新手。
<style>
.custom-card {
width: 250px;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: white;
position: relative;
}
.icon {
background-color: #FFA500;
border-radius: 8px;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
position: absolute;
top: -25px;
left: 20px;
}
.used-space {
font-size: 28px;
font-weight: bold;
margin-top: 30px;
}
.label {
font-size: 14px;
color: gray;
margin-bottom: 20px;
}
.alert-warning {
font-size: 14px;
color: red;
}
</style>
<div class="container mt-5 d-flex justify-content-center">
<div class="custom-card">
<div class="icon">📄</div>
<div class="used-space">49/50 GB</div>
<div class="label">Used Space</div>
<div class="alert-warning">⚠️ Get More Space...</div>
</div>
</div>