Css 引导4卡/面板，标题和标题左侧有图像

我以为我要做的很容易，但我就是做不到

我试着在引导卡和面板上向左拉，但它没有按我希望的方式工作

这是一张我想要的照片

这里的代码几乎可以工作

<div class="card text-center" *ngFor="let event of eventActivities">
    <div class="card-header pull-left">
        <img src="..." alt="">

        Title </div>
    <div class="card-block">
        <h4 class="card-title">Title</h4>
        <p class="card-text">Description</p>
        <a href="#" class="btn btn-primary">BUTTON</a>
    </div>
    <div class="card-footer text-muted">
        FOOTER
    </div>
</div>

标题
标题
说明
页脚

有几种不同的方法可以做到这一点。这里有一种方法可以使用

flex行

和

flex wrap

实用程序类来更改卡中元素的布局

标题
说明
页脚

下面是另一种使用网格的方法

  <div class="card">
        <div class="row no-gutters">
            <div class="col-auto">
                <img src="//placehold.it/200" class="img-fluid" alt="">
            </div>
            <div class="col">
                <div class="card-block px-2">
                    <h4 class="card-title">Title</h4>
                    <p class="card-text">Description</p>
                    <a href="#" class="btn btn-primary">BUTTON</a>
                </div>
            </div>
        </div>
        <div class="card-footer w-100 text-muted">
            Footer stating cats are CUTE little animals
        </div>
  </div>

标题
说明
猫是可爱的小动物

我不确定您为什么将

文本中心
设置为空，它位于所需示例图像的中心。
HTML:

<div class="card">
    <div class="card-horizontal">
        <div class="img-square-wrapper">
            <img class="" src="http://via.placeholder.com/300x180" alt="Card image cap">
        </div>
        <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
    </div>
    <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
    </div>
</div>

结果:

请记住，在引导版本4中，类
向左拉
现在是
向左浮动
。
我现在明白了。
卡片
div中的
弹性行
水平运行页眉、正文和页脚。您将
flex wrap
添加到
card
div中，并将
w-100
添加到
card footer
中，以将页脚推到页眉和正文下方的垂直位置。然后，剩下的唯一一件事就是修复标题下方的超厚边框，您在
卡标题
div中通过添加
border-bottom-0
完成了此操作。非常聪明！仅供参考：我删除了
，没有它它它也会运行。感谢codeply示例！如果描述太长，段落就会破坏布局1.我刚测试过it@aswzen我相信这就是Zim添加替代示例的原因。如果使用
行
和
列
，则可以将
卡头
移动到第一个
列
中，将
卡块
移动到第二个
列
中，较长的描述仍将水平显示在标题旁边，并且看起来与不带字符的较短描述相同
行
和
列
。在
p
中使用较大内容时，图像会丢失位置。为了获得更好的结果，在卡片内容中使用
col-md-2
和
img fluid
类。@e-info128-所以你认为我的答案值得对一个不相关的问题投否决票？这个.img square wrapper类来自哪里？它不是特定于引导的类。
<div class="card">
    <div class="card-horizontal">
        <div class="img-square-wrapper">
            <img class="" src="http://via.placeholder.com/300x180" alt="Card image cap">
        </div>
        <div class="card-body">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
    </div>
    <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
    </div>
</div>

.card-horizontal {
  display: flex;
  flex: 1 1 auto;
}