如何制作带有固定在引导程序 4 中的标题的卡
Posted
技术标签:
【中文标题】如何制作带有固定在引导程序 4 中的标题的卡【英文标题】：How can I make a card with the header fixed in bootstrap 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，但它一直卡在顶部，因此顶部有边距或填充。
【问题讨论】：
【参考方案1】：当物品增加时，您需要将 css 应用到您的 ul 以固定卡头。您可以根据需要更改 ul 高度。
.list-group-flushheight:400px;overflow-y:auto;
.list-group-flushheight: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>【讨论】：
以上是关于如何制作带有固定在引导程序 4 中的标题的卡的主要内容，如果未能解决你的问题，请参考以下文章
如何在引导程序 3 中向下滚动带有固定标题（导航栏）的表格行时将表格标题（标题）粘贴在顶部？