我原以為我要做的事情很容易做到，但我就是做不到。

我試著在引導卡和面板上向左拉，但它不能按照我想要的方式工作...

這是我想得到的東西的照片

例子

下面是幾乎可以工作的代碼

<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-row和flex-wrap實用程序類來改變卡片內部元素布局的方法...

https://codeply.com/go/l1KAQtjjbA

<div class="card flex-row flex-wrap">
        <div class="card-header border-0">
            <img src="//placehold.it/200" alt="" />
        </div>
        <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 class="w-100"></div>
        <div class="card-footer w-100 text-muted">
            FOOTER
        </div>
    </div>

這是另一種使用網格的方法...

<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>

https://codeply.com/go/l1KAQtjjbA

我不知道為什么你有文本中心，因為沒有它在理想的例子圖像中心。

請記住，類pull-left現在在Bootstrap版本4中是左浮動的。