bulma是流行的基于flexbox的css框架，其内置的卡片组件可以快速搭建信息展示模块，不过默认样式和布局往往无法满足复杂业务需求，需要结合css进行针对性优化。
bulma卡片组件基础结构
bulma的卡片组件通过card类作为容器，内部搭配多个子模块类实现不同功能区域，基础结构如下：
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://ipipp.com/demo.jpg" alt="示例图片">
</figure>
</div>
<div class="card-content">
<p class="title is-4">卡片标题</p>
<p class="subtitle is-6">卡片副标题</p>
<div class="content">
这里是卡片的详细内容描述，可以放置文本、列表等信息。
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">操作一</a>
<a href="#" class="card-footer-item">操作二</a>
</footer>
</div>
卡片布局优化方案
多卡片响应式排列
默认单个卡片是块级元素，多卡片排列需要结合bulma的栅格系统或者自定义flex布局，实现不同屏幕下的自适应排列：
/* 自定义多卡片容器样式 */
.card-container {
display: flex;
flex-wrap: wrap;
gap: 1.5rem; /* 卡片之间的间距 */
padding: 1rem;
}
/* 响应式设置单个卡片宽度 */
.card-item {
flex: 1 1 300px; /* 最小宽度300px，自动分配剩余空间 */
max-width: 100%;
}
/* 大屏幕下每行显示3个卡片 */
@media screen and (min-width: 1024px) {
.card-item {
flex: 0 0 calc(33.333% - 1rem);
}
}
/* 中等屏幕下每行显示2个卡片 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
.card-item {
flex: 0 0 calc(50% - 0.75rem);
}
}
对应的html结构如下：
<div class="card-container">
<div class="card card-item">
<!-- 卡片内部内容 -->
</div>
<div class="card card-item">
<!-- 卡片内部内容 -->
</div>
<div class="card card-item">
<!-- 卡片内部内容 -->
</div>
</div>
内容溢出处理
当卡片内容过长时，容易出现内容溢出卡片容器的问题，可以通过css限制内容显示行数：
/* 限制卡片内容最多显示3行，超出显示省略号 */
.card-content .content {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
卡片样式优化技巧
自定义阴影与圆角
bulma默认的卡片阴影较淡，圆角为0，可以通过css自定义更美观的样式：
/* 自定义卡片阴影和圆角 */
.card {
border-radius: 12px; /* 圆角大小 */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 柔和阴影 */
transition: all 0.3s ease; /* 添加过渡效果 */
border: none; /* 移除默认边框 */
}
/* 悬停时增强阴影效果 */
.card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
transform: translateY(-4px); /* 轻微上移效果 */
}
图片区域优化
默认卡片图片是直角，和自定义的圆角卡片不匹配，可以调整图片样式：
/* 让卡片图片上边角跟随卡片圆角 */
.card-image img {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
object-fit: cover; /* 保证图片比例不失真 */
height: 200px; /* 固定图片高度 */
}
底部操作区优化
可以调整卡片底部操作区的样式，提升交互感：
.card-footer {
border-top: 1px solid #f0f0f0;
}
.card-footer-item {
color: #3273dc; /* 操作项颜色 */
padding: 1rem;
}
.card-footer-item:hover {
background-color: #f5f5f5; /* 悬停背景色 */
color: #275bb5;
}
常见问题与解决
- 卡片高度不一致：可以给卡片容器设置
display: flex; flex-direction: column;，让卡片内容区域自动拉伸填充高度 - 移动端卡片间距过小：可以在移动端媒体查询中调整
gap属性，设置合适的间距值 - 自定义样式被框架覆盖：确保自定义css文件在bulma框架css文件之后引入，提升样式优先级