如何制作帶有在 bootstrap 4 中固定的標頭的卡片

Question

我有一張類型卡：

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class='card'> <div class='card-header'> <div class='row'> <div class='col'> <h5 class='mb-0'>Element</h5> </div> <div class='col'> <p class='text-right mb-0'>n</p> </div> </div> </div> <ul class='list-group list-group-flush'> <li class='list-group-item'>Item 1</li> <li class='list-group-item'>Item 2</li> <li class='list-group-item'>Item 3</li> <ul> <div class='card-footer'> <div class='input-group'> <input type='text' class='form-control' placeholder='New item'> <div class='input-group-append'> <button class='btn btn-outline-secondary' type='button'> + </button> </div> </div> </div> </div>

添加的項目越多，項目數量來自的標題移動得越多。

當物品較多時，如何使其保持原位？

我嘗試了粘性頂部，但它一直卡在頂部，因此頂部有邊距或填充。

Answer 1

當項目增加時，您需要將 css 應用於您的 ul 以固定卡頭。 您可以根據需要更改 ul 高度。

.list-group-flush{height:400px;overflow-y:auto;}

 .list-group-flush{height:400px;overflow-y:auto;}

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class='card'> <div class='card-header'> <div class='row'> <div class='col'> <h5 class='mb-0'>Element</h5> </div> <div class='col'> <p class='text-right mb-0'>n</p> </div> </div> </div> <ul class='list-group list-group-flush'> <li class='list-group-item'>Item 1</li> <li class='list-group-item'>Item 2</li> <li class='list-group-item'>Item 3</li> <li class='list-group-item'>Item 1</li> <li class='list-group-item'>Item 2</li> <li class='list-group-item'>Item 3</li> <li class='list-group-item'>Item 1</li> <li class='list-group-item'>Item 2</li> <li class='list-group-item'>Item 3</li> <li class='list-group-item'>Item 1</li> <li class='list-group-item'>Item 2</li> <li class='list-group-item'>Item 3</li> <ul> <div class='card-footer'> <div class='input-group'> <input type='text' class='form-control' placeholder='New item'> <div class='input-group-append'> <button class='btn btn-outline-secondary' type='button'> + </button> </div> </div> </div> </div>

Answer 2

那將是我的方法：

基本：設置位置：相對於父元素（.card）和位置：固定到子元素（.card-header）

 .card{ position: relative; /* all child elements gets positioned relative to this element */ } .card-header{ position: fixed; /* stay fixed on top */ top: 0; width: 100%; z-index: 1; /* needed to stay above other elements */ } .list-group{ padding-top: 50px; }

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class='card'> <div class='card-header'> <div class='row'> <div class='col'> <h5 class='mb-0'>Element</h5> </div> <div class='col'> <p class='text-right mb-0'>n</p> </div> </div> </div> <ul class='list-group list-group-flush'> <li class='list-group-item'>Item 1</li> <li class='list-group-item'>Item 2</li> <li class='list-group-item'>Item 3</li> <li class='list-group-item'>Item 4</li> <li class='list-group-item'>Item 5</li> <li class='list-group-item'>Item 6</li> <li class='list-group-item'>Item 7</li> <li class='list-group-item'>Item 8</li> <li class='list-group-item'>Item 9</li> <ul> <div class='card-footer'> <div class='input-group'> <input type='text' class='form-control' placeholder='New item'> <div class='input-group-append'> <button class='btn btn-outline-secondary' type='button'> + </button> </div> </div> </div> </div>