Bootstrap 4 卡片图像不对齐

【问题标题】：Bootstrap 4 card images don't alignBootstrap 4 卡片图像不对齐
【发布时间】：2019-12-12 05:05:57
【问题描述】：

所以我创建了一个非引导类，称为服务。里面有 3 张引导 4 卡，具有相同的分辨率（225x225 像素）。然后我将它的样式指定为 display: flex，因此它们水平对齐。但是它们实际上并没有对齐。

我尝试为它们中的每一个使用相同的宽度和高度属性，但它不起作用。img 样式 rem 属性也不行。

<div class = "services">

    <div class="card">
        <img src="img/html.png" class="card-img-top" alt="HTML">
    </div>

    <div class="card">
        <img src="img/css.png" class="card-img-top" alt="CSS" >         
    </div>

    <div class="card">
        <img src="img/js.png" class="card-img-top" alt="JS" >
    </div>

</div>

卡片图像应具有相同的宽度和相同的高度，并且完全水平对齐。

【问题讨论】：

它们似乎按预期对齐：codeply.com/go/sbtUKXm4EA

标签： html css twitter-bootstrap image

【解决方案1】：

如果你使用引导程序，你只需要添加引导程序类

d-flex

flex

<div class = "services d-flex">
          <div class="card">
              <img src="https://images.unsplash.com/photo-1558980664-1db506751c6c?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" class="card-img-top" alt="HTML">
            </div>
            <div class="card">
                <img src="https://images.unsplash.com/photo-1558980664-1db506751c6c?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" class="card-img-top" alt="CSS" >         
              </div>
              <div class="card">
                  <img src="https://images.unsplash.com/photo-1558980664-1db506751c6c?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" class="card-img-top" alt="JS" >
                </div>
          </div>

这段代码的结果是

如果你想在自定义 css 中做，你需要把自己的样式放在父类中

display:flex;

【讨论】：