bootstrap 4 卡片 - 带有可变标题行行的垂直对齐体 [英] bootstrap 4 cards - vertical alignment body with variable header line rows

查看：16
本文介绍了bootstrap 4 卡片 - 带有可变标题行行的垂直对齐体的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在我的简单设计中，我使用卡片来展示一些产品.然而，一些产品名称包含 2 行，而其他产品名称仅包含 1 行.

我想让正文垂直对齐(以及价格按钮).

<div class="row"><div class="col-12"><div class="card-group"><div class="card text-center" ><img class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%;object-fit: scale-down" src="http://ss-bol.com/imgbase0/imagebase3/thumb/FC/1/4/7/9/9200000037279741.jpg" height="200px" alt="卡片图像上限"><div class="card-body"><h5 class="card-title">AKRACING Nitro Gaming Racestoel - Wit</h5><p class="card-body">一些快速示例文本，用于构建卡片标题并构成卡片内容的大部分.</p><a href="#" class="btn btn-danger">€279,-</a>

<div class="card text-center" ><img class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%;object-fit: scale-down" src="http://ss-bol.com/imgbase0/imagebase3/thumb/FC/2/4/2/4/9200000076564242.jpg" height="200px" width="25%" alt="卡片图像上限"><div class="card-body"><h5 class="card-title">MSI Gaming GS Rugzak</h5><p class="card-body">一些快速示例文本，用于构建卡片标题并构成卡片内容的大部分.</p><a href="#" class="btn btn-danger">€151,-</a>

<div class="card text-center" ><img class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%;object-fit: scale-down" src="http://ss-bol.com/imgbase0/imagebase3/thumb/FC/3/2/4/9/9200000088829423.jpg" height="200px" alt="卡片图像上限"><div class="card-body"><h5 class="card-title">DJI Mavic Air Onyx Zwart - 无人机</h5><p class="card-body">一些快速示例文本，用于构建卡片标题并构成卡片内容的大部分.</p><a href="#" class="btn btn-danger">€ 753,91</a>

<div class="card text-center" ><img class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%;object-fit: scale-down" src="http://ss-bol.com/imgbase0/imagebase3/thumb/FC/1/7/0/9/9200000063589071.jpg" height="200px" alt="卡片图像上限"><div class="card-body"><h5 class="card-title">BenQ TH683 - 全高清投影仪</h5><p class="card-body">一些快速示例文本，用于构建卡片标题并构成卡片内容的大部分.</p><a href="#" class="btn btn-danger">€589,-</a>

工作代码片段可以在这里找到:https://www.codeply.com/go/zzm764UnFU

编辑添加的代码也内联

解决方案

正如@Paulie_D 提到的，实际上没有简单的方法来对齐卡片中的项目，因为这些项目具有不同的父卡片.

您能做的最好的事情就是将按钮和描述推到底部(使用 mt-auto)，以便按钮与底部对齐...

 
<img class="card-img-top mx-auto d-block" style="max-width: 100%;"><div class="card-body d-flex flex-column align-items-center"><h5 class="card-title">AKRACING Nitro Gaming Racestoel - Wit</h5><p class="mt-auto">一些快速示例文本，用于构建卡片标题并构成卡片内容的大部分.</p><a href="#" class="mt-auto btn btn-danger">€279,-</a>

https://www.codeply.com/go/vQPUwL7GLY

In my simple design I use cards to show some products. However some product titles wrap 2 lines while others wrap only 1 line.

I would like to have the body text vertically aligned (and the price buttons too)..

<div class="container">
      <div class="row">
        <div class="col-12">
            <div class="card-group">
                <div class="card text-center" >
                        <img class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%;object-fit: scale-down" src="http://s.s-bol.com/imgbase0/imagebase3/thumb/FC/1/4/7/9/9200000037279741.jpg"  height="200px" alt="Card image cap">
                        <div class="card-body">
                          <h5 class="card-title">AKRACING Nitro Gaming Racestoel - Wit</h5>
                          <p class="card-body">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                          <a href="#" class="btn btn-danger">€ 279,-</a>
                        </div>
                </div>
                <div class="card text-center" >
                        <img class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%;object-fit: scale-down" src="http://s.s-bol.com/imgbase0/imagebase3/thumb/FC/2/4/2/4/9200000076564242.jpg" height="200px" width="25%" alt="Card image cap">
                        <div class="card-body">
                          <h5 class="card-title">MSI Gaming GS Rugzak</h5>
                          <p class="card-body">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                          <a href="#" class="btn btn-danger">€ 151,-</a>
                        </div>
                </div>
                <div class="card text-center" >
                        <img  class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%;object-fit: scale-down" src="http://s.s-bol.com/imgbase0/imagebase3/thumb/FC/3/2/4/9/9200000088829423.jpg"  height="200px" alt="Card image cap">
                        <div class="card-body">
                          <h5 class="card-title">DJI Mavic Air Onyx Zwart - Drone</h5>
                          <p class="card-body">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                          <a href="#" class="btn btn-danger">€ 753,91</a>
                        </div>
                </div>
                <div class="card text-center" >
                        <img class="card-img-top mx-auto d-block" style="max-width: 100%; max-height: 100%;object-fit: scale-down" src="http://s.s-bol.com/imgbase0/imagebase3/thumb/FC/1/7/0/9/9200000063589071.jpg"  height="200px" alt="Card image cap">
                        <div class="card-body">
                          <h5 class="card-title">BenQ TH683 - Full HD Beamer</h5>
                          <p class="card-body">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                          <a href="#" class="btn btn-danger">€ 589,-</a>
                        </div>
                </div>

            </div>
        </div>
          </div>

</div>

working code snippet can be found here: https://www.codeply.com/go/zzm764UnFU

edit added code also inline

解决方案

As @Paulie_D mentioned there's really no simple way to align the items within the cards since those items have different parent cards.

The best you can do is push the buttons and descriptions to the bottom (using mt-auto) so that the buttons align to the bottom...

  <div class="card text-center">
       <img class="card-img-top mx-auto d-block" style="max-width: 100%;">
       <div class="card-body d-flex flex-column align-items-center">
            <h5 class="card-title">AKRACING Nitro Gaming Racestoel - Wit</h5>
            <p class="mt-auto">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="mt-auto btn btn-danger">€ 279,-</a>
       </div>
  </div>

https://www.codeply.com/go/vQPUwL7GLY

这篇关于bootstrap 4 卡片 - 带有可变标题行行的垂直对齐体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆