全栈开发训练营新手求助：如何用Bootstrap 4.3创建规范的Testimonial Card？

问题描述 #

抱歉问个基础问题，我是全栈Web开发训练营的新学员，目前在挑战任务的这部分遇到了瓶颈。我想创建一个推荐卡片，尝试用Bootstrap 4.3写了如下代码，但页面呈现效果混乱：

<section id="review">
      <div class="container">
        <div class="row">
          <div class="col-md-6 text-white mb-5">
            <h1>TOP SCORE</h1>
            <p>This top score from various game provided on this platform</p>
            <button type="button" class="btn btn-warning">See More</button>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="card" style="background-color: #181818;">
          <div class="card-body">
            <img class="avatar" src="../chap3/assets/evan-lahti.jpg" alt="">
            <h5 class="card-title text-white">Evan Lahti</h5>
            <h6 class="card-subtitle mb-3 text-muted">PC Gamer</h6>
            <img style="position: relative; right: -40px;" src="../chap3/assets/twitter-card.png"></img>
          </div>
          <p class="card-text text-white">"One of my gaming highlights of the year."</p>
          <p class="card-text">
            <small class="text-muted">June 18, 2021</small>
          </p>
        </div>
      </div>
    </section>

核心问题 #

1. 栅格布局错误：右侧的col-md-6没有嵌套在row容器内，脱离了Bootstrap栅格系统，导致两栏无法并排。
2. 卡片结构不规范：卡片的引用文本和日期未放入card-body中，Bootstrap卡片样式无法正确作用于这些元素。
3. 元素排版混乱：头像、用户信息和Twitter图标的布局依赖相对定位，未使用Bootstrap flex工具类，导致排版失控。

修正后的代码 #

<section id="review" class="bg-dark py-5">
  <div class="container">
    <div class="row align-items-center">
      <!-- 左侧标题区域 -->
      <div class="col-md-6 text-white mb-5 mb-md-0">
        <h1>TOP SCORE</h1>
        <p class="mt-3 mb-4">This top score from various game provided on this platform</p>
        <button type="button" class="btn btn-warning">See More</button>
      </div>

      <!-- 右侧推荐卡片 -->
      <div class="col-md-6">
        <div class="card" style="background-color: #181818;">
          <div class="card-body text-white">
            <!-- 用户信息栏 -->
            <div class="d-flex align-items-center mb-4">
              <img 
                class="avatar rounded-circle mr-3" 
                src="../chap3/assets/evan-lahti.jpg" 
                alt="Evan Lahti"
                style="width: 60px; height: 60px; object-fit: cover;"
              >
              <div>
                <h5 class="card-title mb-1">Evan Lahti</h5>
                <h6 class="card-subtitle text-muted">PC Gamer</h6>
              </div>
              <img 
                src="../chap3/assets/twitter-card.png" 
                alt="Twitter"
                class="ml-auto"
                style="width: 40px;"
              >
            </div>

            <!-- 引用文本 -->
            <p class="card-text mb-4 fst-italic">
              "One of my gaming highlights of the year."
            </p>

            <!-- 日期 -->
            <p class="card-text">
              <small class="text-muted">June 18, 2021</small>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

修改说明 #

• 将右侧col-md-6移入container内的row中，添加align-items-center实现两栏垂直居中。
• 把卡片所有内容放入card-body，确保样式统一生效。
• 用d-flex和align-items-center排版用户信息栏，ml-auto让Twitter图标自动靠右，替代不稳定的相对定位。
• 给头像添加rounded-circle和固定尺寸，object-fit: cover保证图片不变形。
• 给section添加bg-dark py-5设置背景色和上下内边距，优化整体视觉效果。
• 使用mt-3、mb-4等间距类调整文本间距，提升排版层次感。

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