Bootstrap 卡片水平滾動

Question

我想使用 bootstrap V.5 水平滾動卡片，如下所示

 <div class="container-fluid py-2">
    <div class="d-flex flex-row flex-nowrap" style="overflow: auto;">
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>
        <div class="card card-body m-2" style="min-width: 300px;">Card</div>

我看到了很多工作示例，但它沒有在我的頁面中滾動？ 我真的不知道這里出了什么問題！ 任何幫助都感激不盡

Answer 1

 <div class="container-fluid py-2" style="overflow: auto;"> <div class="d-flex flex-row flex-nowrap" > <div class="card card-body m-2" style="min-width: 300px;">Card</div> <div class="card card-body m-2" style="min-width: 300px;">Card</div> <div class="card card-body m-2" style="min-width: 300px;">Card</div> <div class="card card-body m-2" style="min-width: 300px;">Card</div> <div class="card card-body m-2" style="min-width: 300px;">Card</div> <div class="card card-body m-2" style="min-width: 300px;">Card</div> <div class="card card-body m-2" style="min-width: 300px;">Card</div> <div class="card card-body m-2" style="min-width: 300px;">Card</div> <div class="card card-body m-2" style="min-width: 300px;">Card</div> <div class="card card-body m-2" style="min-width: 300px;">Card</div> <div class="card card-body m-2" style="min-width: 300px;">Card</div> <div class="card card-body m-2" style="min-width: 300px;">Card</div> </div> </div>

這能解決您的問題嗎？