bootstrap卡片card结合图片的排列应用

bootstrap卡片结合图片的排列应用

bootstrap4开始弃用了panel，改为提供了卡片，作为一个灵活可扩展的内容容器非常好用。

在使用过程中会有图片在左侧的卡片排列需求，下面是实例

我们使用g-0去除间隙，然后水平排列，为防止溢出建议设置下图片宽高。

<div class="card mb-3" style="max-width: 540px;">
        <div class="row g-0">
        <div class="col-md-4">
        <img src="../pic/img.jpg" alt="..." class="w-100">
        </div>
        <div class="col-md-8">
        <div class="card-body">
          <h5 class="card-title">春夏秋冬皆自然</h5>
          <p class="card-text">
            一个人必须经得住假话，承受得起敷衍，忍受欺骗，忘记诺言，把所有的事情都放下。失落之物，其实从未真正属于你，也不必遗憾。
          </p>
          <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
        </div>
        </div>
        </div>