Question

我正在尝试使用Bootstrap 4卡组件创建网格。为此，我阅读了documentation并使用了card-deck选项。我希望每一行都有两列，其行为与col-12 col-md-6类似，特别是第二列也将分为两行，每行都有一张水平卡。我有这段代码：

<div class="container">
    <div class="row">
        <div class="card-deck">
            <div class="card">
                <img
                    class="card-img-top"
                    src$="{{getArticleImage2(article1)}}"
                />
                <div class="card-body py-2">
                    <div class="d-flex justify-content-start align-items-center mb-2">
                        <img class="icon-sm mr-2 img-fluid" src={{getFavIcon(article1)}}>
                        <a class="card-link medium-text" target="_blank" href$="https://{{getSources(article1)}}">
                            {{getSources(article1)}}
                        </a>
                    </div>
                    <p class="card-text article-headline medium-text">
                        {{article1.schema:headline}}
                    </p>
                </div>
            </div>

            <div class="card">
                <div class="row no-gutters">
                    <div class="col-md-5">
                        <img
                            class="card-img"
                            src$="{{getArticleImage2(article2)}}"
                        />
                    </div>
                    <div class="col-md-7">
                        <div class="card-body p-2">
                            <div class="d-flex justify-content-start align-items-center mb-2">
                                <img class="icon-sm mr-2 img-fluid" src={{getFavIcon(article2)}}>
                                <a class="card-link medium-text" target="_blank" href$="https://{{getSources(article2)}}">
                                    {{getSources(article2)}}
                                </a>
                            </div>
                            <p class="card-text article-headline medium-text">
                                {{article2.schema:headline}}
                            </p>
                        </div>
                    </div>
                </div>                        
            </div>

            <div class="card">
                <div class="row no-gutters">
                    <div class="col-md-5">
                        <img
                            class="card-img"
                            src$="{{getArticleImage2(article2)}}"
                        />
                    </div>
                    <div class="col-md-7">
                        <div class="card-body p-2">
                            <div class="d-flex justify-content-start align-items-center mb-2">
                                <img class="icon-sm mr-2 img-fluid" src={{getFavIcon(article3)}}>
                                <a class="card-link medium-text" target="_blank" href$="https://{{getSources(article3)}}">
                                    {{getSources(article3)}}
                                </a>
                            </div>
                            <p class="card-text article-headline medium-text">
                                {{article3.schema:headline}}
                            </p>
                        </div>
                    </div>
                </div>                        
            </div>
        </div>
    </div>
</div>

问题是，在这种情况下，我只有三个列而不是两个列。最后两张卡是水平显示的，但不会堆叠在一起。 Here是一个代码段。我该如何实现？

Answer 1

如果您这样添加了一个类为card-columns的div：

<div class="card-deck">
            <div class="card-columns">
                <div class="card">
                    <img
                        class="card-img-top"
                        src=""
                    />
                    <div class="card-body py-2">
                       //.................

它将为您提供两个克隆，一个具有垂直显示的卡片，另一个包含两个水平的卡片。

也 阅读文档的最后部分 ，也许有助于您指定一栏中包含多少张卡片 https://getbootstrap.com/docs/4.3/components/card/

使用引导卡组件创建网格

1 个答案: