我有一個使用 Bootstrap 5 水平顯示大量卡片的頁面。第一張卡片用作標題記錄，而其他卡片可以水平滾動。這一切都很好。
我的用戶要求在水平滾動其他卡片時將第一張卡片鎖定到位（始終顯示）。這有效，但僅適用于視口上顯示的初始卡片集。一旦你滾動過去，第一張卡片也會滾動離開頁面。
我可以在設定時使用一些幫助，以便第一張卡片始終顯示在頁面上并且不會滾動。其他卡片應在第一張卡片后面滾動
我在這里有一個代碼示例：https ://www.codeply.com/p/3nwL7bVEMl
uj5u.com熱心網友回復：
將一個添加overflow到包裝器/容器類 ( <div >)。
.d-flex.flex-row.flex-nowrap.bg-warning {
overflow: auto;
}
您可以在此處找到其他選項。
uj5u.com熱心網友回復：
你可以給你的卡片一個高度
在使用 z-index 之前，您需要使用
display:relative;而不是將 z-index 添加到您的卡片上用于
position:fixed;使您的卡片始終停留在螢屏上。
.sticky-card {
min-width: 400px;
height:220px;
display:relative;
z-index: 1;
position: fixed;
left: 0;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/452332.html