Bootstrap 4卡片页脚布局：日期左对齐价格右对齐同行实现

嘿，我知道你想给卡片页脚做个左侧显示日期、右侧显示价格的同行布局，用网格没成功对吧？其实Bootstrap本身就有很方便的工具类能搞定这个，不用绕远路，给你两种靠谱的方案：

方案一：用Flex工具类（推荐） #

Bootstrap 4+自带的flex相关工具类，直接给卡片页脚加几个类就能轻松实现需求，代码示例：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">示例卡片</h5>
    <p class="card-text">这是卡片的内容区域</p>
  </div>
  <div class="card-footer d-flex justify-content-between align-items-center">
    <span>2024-05-20</span>
    <span>¥99.00</span>
  </div>
</div>

这里的关键类作用：

• d-flex：把卡片页脚转换为flex容器
• justify-content-between：让两个子元素分别靠容器的左右两端排列
• align-items-center：保证日期和价格在垂直方向上居中对齐

这种方式最简洁，完全贴合你的需求，不用额外写自定义样式。

方案二：正确使用网格系统 #

如果你坚持想用网格布局，大概率是之前的嵌套结构没写对，试试下面的正确写法：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">示例卡片</h5>
    <p class="card-text">这是卡片的内容区域</p>
  </div>
  <div class="card-footer p-0">
    <div class="row w-100 m-0">
      <div class="col-8 d-flex align-items-center p-3">
        2024-05-20
      </div>
      <div class="col-4 d-flex justify-content-end align-items-center p-3">
        ¥99.00
      </div>
    </div>
  </div>
</div>

需要注意的细节：

• 给卡片页脚加p-0去掉默认内边距，避免网格和页脚内边距冲突
• 嵌套的row要加w-100 m-0，保证它占满页脚宽度且无默认外边距
• 用col-8和col-4分配左右区域的宽度，可根据需求调整比例
• 加d-flex align-items-center让内容垂直居中，右侧列加justify-content-end让价格靠右

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