我有一堆卡片，我想讓它們水平滾動。

水平滾動工作，但渲染不是預期的。如下圖所示。

我有一種感覺，這與包裝有關，但我真的看不出缺少什么。這幾乎就像它創建了另一個隱藏其他卡片的列。

我發現很難決定哪些代碼是必要的，哪些不是。所以我在CSS上做了一半的最小化(我認為錯誤可能來自這里),在實際的模板上做了更多的細節，這樣你就可以知道可能導致問題的其他div了。

這里是代碼示例:https://jsfiddle.net/Pmele/pboxcgmw/

base.html

.padding-wrappercard {
        padding: 10px; 
        background-color: #FEC62A; 
        border-radius: 10px;
        width:300px
  }
  .main-card {
    background-color: #090B1A! important; 
    border:3px solid white;
    border-radius: 10px;
    padding:1em;

  }

  .wrapper{

    width:300px;
    display:flex;
    overflow-x:auto;

  }
  .wrapper::-webkit-scrollbar{
    width:0
  }

模板

<div class="wrapper">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-lg-3 col-sm-6">
            <div class="card hovercard">
              <div class="padding-wrappercard">
                <div class="main-card main-card-border">



                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

</div>