如何将Bootstrap 4的card-body拆分为1:3比例的两列放置图片与标题？

没问题！在Bootstrap 4中，借助它自带的网格系统就能轻松实现这个需求，核心思路是在card-body内部嵌套row和col类来划分1:3的宽度比例，具体修改后的代码如下：

<div class="card-body">
  <!-- 用row创建flex容器，align-items-center让内容垂直居中 -->
  <div class="row align-items-center">
    <!-- 图片列：占3格（对应1/4宽度，即1份） -->
    <div class="col-3">
      <img src="{{asset('images/yimage.jpg')}}" alt="Topic Image" class="rounded-circle">
    </div>
    <!-- 标题列：占9格（对应3/4宽度，即3份） -->
    <div class="col-9">
      <p class="mb-0">This is Title of the Topic</p>
    </div>
  </div>
</div>

关键细节说明： #

• Bootstrap的网格基于12列系统，col-3和col-9的宽度比例正好是1:3（3/9 = 1/3）
• 给row添加align-items-center类，可以让图片和标题在垂直方向上居中对齐，优化视觉体验
• 如果希望在小屏幕（比如手机）上自动切换为上下堆叠布局，只需要把col-3改成col-md-3，col-9改成col-md-9即可

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