Bootstrap 4：实现图片居标题左侧的Card/Panel布局问题

我懂你这种困扰——本来以为调整卡片里图片和标题的位置很简单，结果用pull-left类死活达不到想要的效果对吧？其实Bootstrap 4已经全面转向Flexbox布局了，旧的浮动类（比如pull-left）早就不推荐用了，用Flex来实现这个需求才是最稳妥的。

下面给你两种常用的实现方式，对应不同的卡片布局场景：

场景1：图片在卡片头部标题左侧 #

直接给卡片头部加上d-flex和align-items-center类，让头部变成Flex容器，就能轻松实现垂直居中的图片+标题布局：

<div class="card">
  <div class="card-header d-flex align-items-center">
    <!-- 图片：自定义宽高，加右边间距 -->
    <img src="your-image-url" alt="标题左侧图标" class="mr-3" style="width: 48px; height: 48px;">
    <!-- 标题：去掉默认下边距避免多余空隙 -->
    <h5 class="card-title mb-0">这是我的卡片标题</h5>
  </div>
  <div class="card-body">
    <p class="card-text">这里是卡片的主体内容，随便写点啥都行~</p>
  </div>
</div>

场景2：图片在卡片主体内的标题左侧 #

如果图片和标题都在卡片主体里，同样用Flex布局，调整对齐方式让顶部对齐即可：

<div class="card">
  <div class="card-body d-flex align-items-start">
    <img src="your-image-url" alt="内容区图标" class="mr-3" style="width: 56px; height: 56px;">
    <!-- 用div包裹标题和内容，让内容自动换行到标题下方 -->
    <div>
      <h5 class="card-title">带左侧图片的标题</h5>
      <p class="card-text">这是标题下方的详细内容，会自动在标题下面排列，不会和图片挤在一起~</p>
      <a href="#" class="btn btn-primary">查看更多</a>
    </div>
  </div>
</div>

为啥pull-left不好用？ #

Bootstrap 4里pull-left已经被float-left替代，但浮动元素会脱离文档流，很容易导致标题环绕图片、垂直对齐混乱，甚至卡片高度计算出错。而Flex布局是Bootstrap 4的核心布局方式，不仅能完美解决这些问题，还自带响应式适配，在小屏幕上也能自动调整布局。

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