Html 引导网格系统不工作，无法调整卡元素的大小

嗨，我正在将我的股票交易员项目从引导程序3迁移到引导程序4，我遇到了一些问题

如图所示，“col-sm-6 col-md-4”不起作用

卡片仅显示在浏览器的左侧，我似乎无法以更自然的方式显示卡片。它只是在列后面

注意：我正在使用VUEJS 3

这是我的引导3代码

<div class="col-sm-6 col-md-4">
<div class="panel panel-success">
  <div class="panel-heading">
    <h3 class="panel-title">
      {{ stock.name }}
      <small>(price: {{ stock.price }})</small>
    </h3>
  </div>
  <div class="panel-body">
    <div class="pull-left">
      <input
        type="number"
        class="form-control"
        placeholder="Quantity"
        v-model="quantity"
        :class="{ danger: insufficientFunds }"
      />
    </div>
    <div class="pull-right">
      <button
        class="btn btn-success"
        @click="buyStock"
        :disabled="
          insufficientFunds || quantity <= 0 || !Number.isInteger(+quantity)
        "
      >
        {{ insufficientFunds ? "Insufficient Funds" : "Buy" }}
      </button>
    </div>
  </div>
</div>

{{stock.name}
（价格：{{stock.price}}）
{{资金不足？“资金不足”：“购买”}

这是我的引导4代码

  <div class="container">
<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="card">
      <h5 class="card-header bg-success">
        {{ stock.name }} <small>(price: {{ stock.price }})</small>
      </h5>
      <div class="card-body d-flex">
          <input
            type="number"
            class="form-control"
            placeholder="Quantity"
            v-model="quantity"
            :class="{ danger: insufficientFunds }"
          />
          <button
            class="btn btn-success"
            @click="buyStock"
            :disabled="
              insufficientFunds ||
              quantity <= 0 ||
              !Number.isInteger(+quantity)
            "
          >
            {{ insufficientFunds ? "Insufficient Funds" : "Buy" }}
          </button>
      </div>
    </div>
  </div>
</div>

{{stock.name}（价格：{{stock.price}}）
{{资金不足？“资金不足”：“购买”}

PS.I已正确连接各个BOOTSTAP版本的CDN链接