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>

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。