在引导程序上使用滚动

Question

我想在我的子组件（ProductList.vue）的引导中实现滚动。谁能帮我将代码粘贴到 boostrap 5 中？我一直在寻找问题，但还没有找到。这是我在子组件 (ProductList.vue) 上的 bootstrap 5 代码

    <template>
        <div class="row d-flex justify-content-center">
          <div
            class="card text-center card-wrapper"
            style="width: 18rem"
            v-for="product in products"
            :key="product.item"
          >
            <img class="p-2" style="max-height:200px; height:100%" :src="product.imgUrl" alt="product.title" />
            <div class="card-body ">
              <h5 class="card-title text-truncate">{{ product.title }}</h5>
              <p class="card-text">$ {{ product.price }}</p>
              <a href="#" class="btn btn-primary">Add to cart</a>
            </div>
          </div>
        </div>
    </template>
    
    <script>
    import products from "../item/product.json";
    export default {
      name: "ProduckList",
      data() {
        return {
          products,
        };
      },
    };
    </script>
    
    <style scoped>
        .card-wrapper {
          background-color: rgb(149, 211, 247);
        }
    </style>

这是在父组件（App.vue）上

    <template>
      <Header />
        <div class="row">
          <div class="col-8">
              <produck-list />
          </div>
          <div class="col-4">
            <Cart />
          </div>
      </div>
    </template>
    
    <script>
    import Header from "./components/Header.vue";
    import ProduckList from "./components/ProductList.vue";
    import Cart from "./components/Cart.vue";
    export default {
      components: {
        Header,
        ProduckList,
        Cart,
      },
    };
    </script>
    
    <style>
      body {
            background-color: rgb(13, 30, 37)!important;
          }
    </style>

我希望卡片的结果可以像这样滚动https://getbootstrap.com/docs/5.0/utilities/overflow/

Answer 1

您似乎没有将 overflow-auto 简写添加到您的顶部 div，也许如下编辑您的顶部 div 可能会有所帮助。

<div class="row d-flex justify-content-center overflow-auto">