html - 如何制作一张卡头固定在 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>

添加的元素越多，元素数量来源的标题移动得越多。

元素较多时如何使其保持原位？

我尝试了 sticky-top ，但它一直粘在顶部，因此顶部有边距或填充。

Answer 1

这就是我的方法:

基本上:设置position:relative于父元素(.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>