Question

对于4张卡使用d-flex类我想并排排列，我使用以下标记：

<div id="home">
    <div class="d-flex flex-row flex-wrap justify-content-between"> 
        <div class="card">
            <div class="card-title">Card 1</div>
            <p class="card-text">Lorem ipsum dolor sit amet, idque summo intellegam his ea, fugit deserunt has ei. Magna minimum prodesset id ius, pri te adhuc officiis evertitur, vel nulla comprehensam ne. Ad prima accumsan conceptam vis, per at augue paulo constituto. Quo evertitur dissentiunt et, ut verterem lobortis mei. Minimum fabellas similique eu eam, ea his simul quaeque consetetur...</p>
            <div class="btn-cntr"><button class="float right">Read More...</button></div>
        </div>
        <div class="card">
            <div class="card-title">Card 2</div>
            <p class="card-text">Lorem ipsum dolor sit amet, idque summo intellegam his ea, fugit deserunt has ei. Magna minimum prodesset id ius, pri te adhuc officiis evertitur, vel nulla comprehensam ne. Ad prima accumsan conceptam vis, per at augue paulo constituto. Quo evertitur dissentiunt et, ut verterem lobortis mei. Minimum fabellas similique eu eam, ea his simul quaeque consetetur...</p>
            <div class="btn-cntr"><button class="float right">Read More...</button></div>
        </div>
        <div class="card">
            <div class="card-title">Card 3</div>
            <p class="card-text">Lorem ipsum dolor sit amet, idque summo intellegam his ea, fugit deserunt has ei. Magna minimum prodesset id ius, pri te adhuc officiis evertitur, vel nulla comprehensam ne. Ad prima accumsan conceptam vis, per at augue paulo constituto. Quo evertitur dissentiunt et, ut verterem lobortis mei. Minimum fabellas similique eu eam, ea his simul quaeque consetetur...</p>
            <div class="btn-cntr"><button class="float right">Read More...</button></div>
        </div>
        <div class="card">
            <div class="card-title">Card 4</div>
            <p class="card-text">Lorem ipsum dolor sit amet, idque summo intellegam his ea, fugit deserunt has ei. Magna minimum prodesset id ius, pri te adhuc officiis evertitur, vel nulla comprehensam ne. Ad prima accumsan conceptam vis, per at augue paulo constituto. Quo evertitur dissentiunt et, ut verterem lobortis mei. Minimum fabellas similique eu eam, ea his simul quaeque consetetur...</p>
            <div class="btn-cntr"><button class="float right">Read More...</button></div>
        </div>                          
    </div>
</div>

每张卡都占据视图的整个宽度并垂直堆叠。有什么东西我不见了吗？

Answer 1

“每张卡片都占据了视图的整个宽度并垂直堆叠。是否有我遗漏的东西？”

由于flex-wrap中的d-flex类，这种情况正在发生。移除它可以使卡片均匀地填充行。

<div class="d-flex flex-row justify-content-between"> 
        <div class="card">
            ...
        </div>
        <div class="card">
            ...
        </div>
        ...
</div>

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

Answer 2

您应该从第二个div中删除“flex-wrap”类。

Bootstrap 4在d-flex中使用卡类

2 个答案: