引导程序中的垂直和水平调整卡

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 。