标题和标题左侧带有图像的 Bootstrap 4 卡/面板 [英] Bootstrap 4 card/panel with image left of header and title

查看：23
本文介绍了标题和标题左侧带有图像的 Bootstrap 4 卡/面板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我认为我想做的事情很容易做到，但我就是做不到.

我试图在引导卡和面板上向左拉，但它没有按照我想要的方式工作......

这是我想要达到的目标的图片

示例

这里的代码几乎可以工作

<div class="card-header pull-left"><img src="..." alt="">标题
<div class="card-block"><h4 class="card-title">Title</h4><p class="card-text">描述</p><a href="#" class="btn btn-primary">BUTTON</a>

<div class="card-footer text-muted">页脚

解决方案

有几种不同的方法可以做到这一点.这是使用 flex-row 和 flex-wrap 实用程序类更改卡片内元素布局的一种方法...

https://www.codeply.com/go/l1KAQtjjbA

 
<div class="card-header border-0"><img src="//placehold.it/200" alt="">
<div class="card-block px-2"><h4 class="card-title">Title</h4><p class="card-text">描述</p><a href="#" class="btn btn-primary">BUTTON</a>

<div class="w-100"></div><div class="card-footer w-100 text-muted">页脚

这是另一种使用网格的方法...

 
<div class="row no-gutters"><div class="col-auto"><img src="//placehold.it/200" class="img-fluid" alt="">
<div class="col"><div class="card-block px-2"><h4 class="card-title">Title</h4><p class="card-text">描述</p><a href="#" class="btn btn-primary">BUTTON</a>
<div class="card-footer w-100 text-muted">页脚说明猫是可爱的小动物

https://www.codeply.com/go/l1KAQtjjbA

我不知道为什么你有 text-center 没有它在所需的示例图像中居中.

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

Example

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>

解决方案

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

I'm not sure why you have text-center as nothing it centered in the desired example image.

这篇关于标题和标题左侧带有图像的 Bootstrap 4 卡/面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆