如何在Bootstrap中制作单个卡片？尝试代码未达预期求指导

你的代码已经有了基础结构，只需调整样式和布局细节就能匹配目标效果，以下是修改后的完整代码：

<div class="row justify-content-center">
  <div class="col-3 me-3" style="background-color: #F1F3F8; border-radius: 10px; padding: 1.2rem;">
    <div class="row align-items-center">
      <div class="col-auto">
        <img src="/src/photos/event_upcoming.svg" class="img-fluid" style="width: 48px; height: 48px;" />
      </div>
      <div class="col">
        <p style="margin: 0; font-size: 0.85rem; color: #666;">Срок обучения</p>
        <p style="margin: 0; font-size: 1.2rem; font-weight: 600;">6 месяцев</p>
      </div>
    </div>
  </div>
</div>

关键修改说明： #

• 给外层卡片容器添加padding: 1.2rem;，让内容和边框保持合适距离，避免紧贴
• 内层row添加align-items-center，让图标和文字垂直居中对齐
• 把图标所在的col从col-6改成col-auto，让它只占用图标需要的宽度，避免空间浪费
• 给文字设置分层样式：标题用小号灰色字体，数字用大号加粗字体，同时去掉默认margin消除多余间距
• 给图标固定宽高（可按需调整），保证显示尺寸一致

如果需要复用样式，可把内联样式提取到CSS类中：

.info-card {
  background-color: #F1F3F8;
  border-radius: 10px;
  padding: 1.2rem;
}
.info-card .row {
  align-items: center;
}
.info-card-icon {
  width: 48px;
  height: 48px;
}
.info-card-label {
  margin: 0;
  font-size: 0.85rem;
  color: #666;
}
.info-card-value {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
}

对应HTML：

<div class="row justify-content-center">
  <div class="col-3 me-3 info-card">
    <div class="row">
      <div class="col-auto">
        <img src="/src/photos/event_upcoming.svg" class="img-fluid info-card-icon" />
      </div>
      <div class="col">
        <p class="info-card-label">Срок обучения</p>
        <p class="info-card-value">6 месяцев</p>
      </div>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者betepok