如何调整Bootstrap col-4布局中图片大小并将文字置于图片右侧？

尝试用Bootstrap创建一行3个col-4列，每列包含图片及对应文字，期望文字位于图片右侧，但当前文字显示在图片下方且图片尺寸过大。曾在styles.css中为标题和<p>标签设置float:right和text-align:right属性，但未达到预期效果。

用户代码：

<div class="row container justify-content-start third_row">
      <div class="col-4">
        <img src="assets/images/image-retro-pcs.jpg" alt="retro-pc">
        <h2>01</h2>
        <h4>Reviving Retro PCs</h4>
        <p>What happens when old PCs are given modern upgrades?</p>
      </div>
      <div class="col-4">
        <img src="assets/images/image-top-laptops.jpg" alt="top-laptops">
        <h2>02</h2>
        <h4>Top 10 Laptops of 2022</h4>
        <p>Our best picks for various needs and budgets.</p>
      </div>
      <div class="col-4">
        <img src="assets/images/image-gaming-growth.jpg" alt="gaming-growth">
        <h2>03</h2>
        <h4>The Growth of Gaming</h4>
        <p>How the pandemic has sparked fresh opportunities.</p>
      </div>
    </div>

一、缩小图片尺寸 #

有两种简单实现方式：

• 使用Bootstrap内置类：给<img>标签添加img-fluid（保证响应式）和宽度控制类，比如w-25表示占父容器25%宽度，可根据需求换成w-30/w-40等：

  <img src="assets/images/image-retro-pcs.jpg" alt="retro-pc" class="img-fluid w-25">
  

• 自定义CSS：如果需要固定尺寸，在styles.css中添加：

  .third_row img {
    width: 100px; /* 自定义宽度 */
    height: auto; /* 保持图片宽高比 */
    object-fit: cover; /* 可选，防止拉伸变形 */
  }
  

二、将文字放在图片右侧 #

用Bootstrap的Flex布局替代float，更稳定可靠。修改每个col-4的内部结构，把图片和文字容器用Flex包裹：

<div class="row container justify-content-start third_row">
  <div class="col-4 d-flex align-items-center">
    <img src="assets/images/image-retro-pcs.jpg" alt="retro-pc" class="img-fluid w-25 me-3">
    <div>
      <h2>01</h2>
      <h4>Reviving Retro PCs</h4>
      <p>What happens when old PCs are given modern upgrades?</p>
    </div>
  </div>
  <div class="col-4 d-flex align-items-center">
    <img src="assets/images/image-top-laptops.jpg" alt="top-laptops" class="img-fluid w-25 me-3">
    <div>
      <h2>02</h2>
      <h4>Top 10 Laptops of 2022</h4>
      <p>Our best picks for various needs and budgets.</p>
    </div>
  </div>
  <div class="col-4 d-flex align-items-center">
    <img src="assets/images/image-gaming-growth.jpg" alt="gaming-growth" class="img-fluid w-25 me-3">
    <div>
      <h2>03</h2>
      <h4>The Growth of Gaming</h4>
      <p>How the pandemic has sparked fresh opportunities.</p>
    </div>
  </div>
</div>

关键类说明： #

• d-flex：让col-4内部元素横向排列
• align-items-center：让图片和文字垂直居中对齐（可选，可换成align-items-start等）
• me-3：给图片添加右侧外边距，分隔图片与文字

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