CSS 标题和标题左侧带有图像的 Bootstrap 4 卡/面板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49141874/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 card/panel with image left of header and title
提问by RealmSpy
I thought what I'm trying to do would be pretty easy to do but I just can't make it work.
我以为我要做的事情很容易做到，但我就是做不到。
I tried to do pull-left on bootstrap cards and panels and it's not working the way I want it to...
我试图在引导卡和面板上向左拉，但它没有按照我想要的方式工作......
Here is a picture of what I'd like to acheive
这是我想要实现的图片
Heres code that almost works
这是几乎有效的代码
<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>
回答by Zim
There are a few different ways you could do this. Here's one way using the flex-rowand flex-wraputility classes to change the layout of elements inside the card...
有几种不同的方法可以做到这一点。这是使用flex-row和flex-wrap实用程序类更改卡片内元素布局的一种方法 ......
https://www.codeply.com/go/l1KAQtjjbA
https://www.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>
Here's another approach using the grid...
这是使用网格的另一种方法......
<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://www.codeply.com/go/l1KAQtjjbA
https://www.codeply.com/go/l1KAQtjjbA
I'm not sure why you have text-centeras nothing it centered in the desired example image.
我不知道为什么你text-center没有它在所需的示例图像中居中。
