在引导上使用滚动

Question

我想在我的子组件(ProductList.vue)上实现滚动引导。谁能帮我如何粘贴在bootstrap 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

似乎您还没有在顶部div中添加overflow-auto简写，也许像下面这样编辑顶部div可能会有所帮助。

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