在React中使用Bootstrap实现同排证书详情左对齐日期右对齐

你可以直接用Bootstrap内置的弹性布局类实现需求，不需要额外写自定义CSS，步骤如下：

1. 把原本合并在同一个<h3>里的标题和日期拆分为两个独立的子元素
2. 用带Bootstrap flex相关类的父容器包裹两个子元素，实现同排左右对齐的效果

完整实现代码 #

import React from 'react'

function CertificateHeader() {
  // 提前计算日期，代码更易维护
  const currentDate = `${new Date().getDate()}/${new Date().getMonth() + 1}/${new Date().getFullYear()}`

  return (
    <div className="certificate-wrapper">
      {/* 顶部图片 */}
      <img 
        src="https://i.sstatic.net/26Lql.png" 
        alt="证书顶部标识" 
        className="w-100 mb-3"
      />
      {/* 标题+日期行 */}
      <div className="d-flex justify-content-between align-items-center w-100 mb-4">
        <h3>CERTIFICATE DETAILS</h3>
        <h3>{currentDate}</h3>
      </div>
      
      {/* 下方其他证书内容 */}
    </div>
  )
}

export default CertificateHeader

类名说明 #

• d-flex：将父容器设置为弹性布局，默认让子元素横向排列在同一行
• justify-content-between：自动将两个子元素分别对齐到容器的左右两端，实现标题左对齐、日期右对齐
• align-items-center：让两个标题在垂直方向居中对齐，避免高度不同出现错位
• w-100：让容器占满父级全宽，保证左右对齐的间距足够
• mb-3/mb-4：给元素下方添加预设的外边距，无需手写CSS即可快速调整间距

注意事项 #

原代码中getMonth()返回值范围是0-11（0代表1月），所以需要加1才能输出正确的月份。
如果之前全局有居中样式导致对齐异常，可以给父容器额外加text-start类覆盖全局居中规则。

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