Как сделать карту с фиксированным заголовком в bootstrap 4 - PullRequest
Новая
       43

Как сделать карту с фиксированным заголовком в bootstrap 4

0 голосов
/ 02 марта 2019

У меня есть карточка типа: 

<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>

Чем больше элементов добавлено, тем больше перемещается заголовок, из которого поступает количество элементов.

Как заставить его оставаться на месте, когдаэлементы больше?

Я пробовал наклейку, но она застряла до самого верха, поэтому на ней есть поле или отступы.

1 Ответ

0 голосов
/ 02 марта 2019

это мой подход:

в основном: установить положение: относительно родительского элемента (.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>
...