Ale*_*ski 2 twitter-bootstrap bootstrap-5
这是我当前拥有的代码 - 我希望仅在滚动容器视口（例如：.scrollable）后才能看到“最后一项”。现在它调整父级以适应，因此仅显示主 html/body 滚动条。使用 flexbox 实用程序可以实现这一点吗？帮助！:)
<div class="container-fluid h-100 ">
<div class="row h-100">
<div class="col">
<div class="h-100 d-flex flex-column">
<div class="row my-3">
<div class="col">
<input type="text" class="form-control form-control-lg" placeholder="Input"
aria-label="First name">
</div>
<div class="col">
<input type="text" class="form-control form-control-lg" placeholder="Input"
aria-label="Last name">
</div>
<div class="col">
<input type="text" class="form-control form-control-lg" placeholder="Last name"
aria-label="Last name">
</div>
</div>
<div class="row mb-3">
<div class="btn-group" role="group" aria-label="Basic outlined example">
<button type="button" class="btn btn-outline-primary p-2 bg-white"
style="border: 1px solid #ced4da">Overview</button>
<button type="button" class="btn btn-outline-primary bg-white"
style="border: 1px solid #ced4da">Tickets</button>
<button type="button" class="btn btn-outline-primary bg-white"
style="border: 1px solid #ced4da">...</button>
</div>
</div>
<div class="row h-100 mb-3 mx-0 ">
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-4 h-100 p-0 m-0">
<div class="card h-100 border rounded bg-white">
<div class="card-header">
List
</div>
<div class="card-body p-0 m-0">
<div class="list-group h-100 list-group-flush rounded-0">
<div class="h-100 scrollable overflow-auto">
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Show item<br>
Last item<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
请记住，h-100是相对于父级的高度，并且父级必须具有定义的高度。因此，请vh-100 overflow-hidden在您想要作为视口高度的元素上使用。强制可滚动容器的父级保持在该高度内。最后overflow-auto在可滚动元素上使用......
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="d-flex flex-column vh-100 overflow-hidden">
<div class="row my-3">
<div class="col">
<input type="text" class="form-control form-control-lg" placeholder="Input" aria-label="First name">
</div>
<div class="col">
<input type="text" class="form-control form-control-lg" placeholder="Input" aria-label="Last name">
</div>
<div class="col">
<input type="text" class="form-control form-control-lg" placeholder="Last name" aria-label="Last name">
</div>
</div>
<div class="row mb-3">
<div class="btn-group" role="group" aria-label="Basic outlined example">
<button type="button" class="btn btn-outline-primary p-2 bg-white" style="border: 1px solid #ced4da">Overview</button>
<button type="button" class="btn btn-outline-primary bg-white" style="border: 1px solid #ced4da">Tickets</button>
<button type="button" class="btn btn-outline-primary bg-white" style="border: 1px solid #ced4da">...</button>
</div>
</div>
<div class="row h-100 mb-3 mx-0 overflow-hidden">
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-4 h-100 p-0 m-0">
<div class="card h-100 border rounded bg-white">
<div class="card-header"> List </div>
<div class="card-body p-0 m-0 overflow-hidden">
<div class="list-group h-100 list-group-flush rounded-0">
<div class="h-100 scrollable overflow-auto"> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Show item<br> Last item<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
https://codeply.com/p/mpjmGWAkQa
| 归档时间： |
|
| 查看次数： |
6448 次 |
| 最近记录： |