Bootstrap 引导程序4卡/面板，图像位于页眉和标题左侧

yi0zb3m4 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(3)|浏览(364)

我以为我想做的事情会很容易，但我就是不能让它工作。
我试着在引导卡和面板上做左拉，但它不像我希望的那样工作...
这是一张我想要实现的图片
Example
这里的代码几乎可以正常工作

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

twitter-bootstrap

来源：https://stackoverflow.com/questions/49141874/bootstrap-4-card-panel-with-image-left-of-header-and-title

3条答案

按热度按时间

qqrboqgw1#

有几种不同的方法可以做到这一点。这里有一种方法使用flex-row和flex-wrap实用程序类来更改卡片中元素的布局...
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>

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

<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作为没有它在所需的例子图像中心。

赞(0）回复(0）举报 2022-12-07

o8x7eapl2#

于飞：

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

CSS：

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

结果：

赞(0）回复(0）举报 2022-12-07

kr98yfug3#

请记住，pull-left类现在在Bootstrap版本4中为float-left。

赞(0）回复(0）举报 2022-12-07

我来回答

Bootstrap 引导程序4卡/面板，图像位于页眉和标题左侧

3条答案

相关问题

热门标签

最新问答