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

当物品增加时，您需要将ul应用于固定卡头的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

那是我的方法：

基本：设置position：相对于父元素（.card）和position：fixed到子元素（.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中的卡

2 个答案: