html - 引导网格系统不起作用，可以调整卡片元素的大小

Question

嗨，我正在将我的股票交易者项目从 bootstrap 3 迁移到 bootstrap 4，我遇到了问题

1. ""col-sm-6 col-md-4" 在这里不起作用是图像

2. 卡片只显示在浏览器的左侧，我似乎无法以更自然的方式显示卡片。它就在专栏之后。

注意：我正在使用 VueJS 3

这是我的 BOOTSTRAP 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>

这是我的 BOOTSTRAP 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>

PS。我已经正确地链接了各个 BOOTSTAP 版本

标签： htmlcssbootstrap-4vuejs3