Bootstrap 4卡/面板,标题和标题左侧留有图像 [英] Bootstrap 4 card/panel with image left of header and title
问题描述
我认为我想做的事很容易做,但我只是做不到.
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
这里的代码几乎有效
<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
实用程序类来更改卡内元素布局的一种方法...
There are a few different ways you could do this. Here's one way using the flex-row
and flex-wrap
utility classes to change the layout of elements inside the card...
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
我不确定您为什么没有text-center
,因为它没有出现在所需示例图像中.
I'm not sure why you have text-center
as nothing it centered in the desired example image.
这篇关于Bootstrap 4卡/面板,标题和标题左侧留有图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!