如何组织卡片组的身体

Question

我有这样的卡牌

我要整理这些框：框的总宽度= Amazon Cost 宽度+ BOXI + 宽度： 下面是我的代码

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex flex-column  justify-content-center align-items-center h-100">
    <div class="card-deck w-55">
        <div class="card text-center">
            <div class="card-header">
                <h5 >Amazon Costs</h5>
            </div>
            <div class="card-body">
                <h5 id="amc" class="card-title"></h5>
            </div>
        </div>
        <div class="card text-center">
            <div class="card-header">
                <h5 >BOXI+</h5>
            </div>
            <div class="card-body">
                <h5 id="boxiP" class="card-title"></h5>
            </div>
        </div>
    </div>
        <div class="card text-center">
            <div class="card-header">
                <h5 >Total</h5>
            </div>
            <div class="card-body">
                <h5 id="tt" class="card-title"></h5>
            </div>
        </div>
</div>

Answer 1

在最后一张卡之前添加全宽DIV（<div class="w-100"></div>）...

  <div class="d-flex flex-column  justify-content-center align-items-center h-100">
        <div class="card-deck">
            <div class="card text-center">
                <div class="card-header">
                    <h5>Amazon Costs</h5>
                </div>
                <div class="card-body">
                    <h5 id="amc" class="card-title"></h5>
                </div>
            </div>
            <div class="card text-center">
                <div class="card-header">
                    <h5>BOXI+</h5>
                </div>
                <div class="card-body">
                    <h5 id="boxiP" class="card-title"></h5>
                </div>
            </div>
            <div class="w-100"></div>
            <div class="card text-center">
                <div class="card-header">
                    <h5>Total</h5>
                </div>
                <div class="card-body">
                    <h5 id="tt" class="card-title"></h5>
                </div>
            </div>
        </div>
  </div>

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