【问题标题】：How can I make a card with the header fixed in bootstrap 4如何制作带有固定在引导程序 4 中的标题的卡
【发布时间】：2019-07-24 00:04:26
【问题描述】：
我有一张类型卡：
<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>
添加的项越多，项数来自的表头移动的越多。
当物品较多时，如何让它保持原位？
我尝试了sticky-top，但它一直卡在顶部，因此顶部有边距或填充。
【问题讨论】：
标签：
html
css
bootstrap-4
frontend
【解决方案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>
【解决方案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>