Question

我已经尝试过让我的自举卡正确排队，现在我终于回复创建自己的问题了，所以希望有人可以提供帮助！

这些卡片原本都是相同的宽度并正确堆叠，但高度已关闭。它们是连续的，但只能延伸到内容的高度。

现在我通过在div中使用d-flex align-items-stretch找到了适用于高度的解决方案。然而，现在当我移动到较小的设备时，高度匹配，但宽度现在随内容延伸。有什么建议吗？

<section class="row ">
<div class="col-12">
    <h3 class="mb-4">Row Title</h3>
</div>

<div class="col-lg-6 mb-4 d-flex align-items-stretch">
    <div class="card">
        <div class="card-header">Card 1</div>
        <div class="card-block">
            <p><b>Overview:</b> Text 1<br><br>
            <b>More:</b> Text 2<br><br></p>
            <button class="btn btn-secondary margin" type="button"><span class="fa fa-check"></span> &nbsp;Go</button>
            <button class="btn btn-secondary margin" type="button"><span class="fa fa-file"></span> &nbsp; Information</button>

        </div>
    </div>
</div>

<div class="col-lg-6 mb-4 d-flex align-items-stretch">
    <div class="card text-white bg-success">
        <div class="card-header">Card 2</div>
        <div class="card-block">
            <p><b>Overview:</b> Text 2</b></p>
            <button class="btn btn-secondary margin" type="button"><span class="fa fa-check"></span> &nbsp;Go</button>
            <button class="btn btn-secondary margin" type="button"><span class="fa fa-file"></span> &nbsp; Information</button>
        </div>
    </div>
</div>

https://imgur.com/a/JFJGV

Answer 1

如果您希望它们拉伸/填充水平宽度，可以在卡片上使用w-100。

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

另请注意，在Bootstrap 4.0.0 card-block现在card-body用于填充卡片。

Bootstrap中的垂直和水平尺寸卡

1 个答案: