【发布时间】：2021-07-29 22:23:30
【问题描述】：
这是我目前拥有的代码 - 我希望只有在滚动容器视口后才能看到“最后一项”（例如：.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>
【问题讨论】：
-
您是说您希望内部
container-fluid可滚动以使顶部表单保持可见？请说明您要查找的内容。 -
具有“可滚动”类的元素应该占用视口高度，但它的内容应该是可滚动的。有意义吗？
标签： twitter-bootstrap bootstrap-5