我使用 bootstrap 的網格布局來創建一個概覽，其中一行作為標題。該行應始終貼在網格的頂部。
問題是滾動條出現時我無法處理。它以某種方式更改布局，以便標題不再與行對齊（請參見下面的示例）。
將標題放在可滾動容器中修復了布局問題，但會將標題滾動。
無論滾動條是否可見，如何對齊內容和標題都無關緊要？
示例： 請注意每列的對齊程度如何。
.max-height {
max-height: 100px;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-md border m-3">
<div class="row">
<div class="col">
Some Heading
</div>
<div class="col">
Some Heading
</div>
<div class="col">
Some Heading
</div>
</div>
<div class="row overflow-auto max-height">
<div class="col">
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
</div>
</div>
</div>uj5u.com熱心網友回復：
這不是一個完美的解決方案，但這樣的事情怎么樣？
我將標題欄設定為sticky-top，并給它一個背景顏色。然后將容器設定為溢位自動。
.max-height {
max-height: 100px;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-md border m-3 overflow-auto ">
<div class="row sticky-top bg-white">
<div class="col">
Some Heading
</div>
<div class="col">
Some Heading
</div>
<div class="col">
Some Heading
</div>
</div>
<div class="row max-height">
<div class="col">
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
<div class="row">
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
<div class="col">
Some Content
</div>
</div>
</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/386127.html
標籤：css 推特引导 bootstrap-5
上一篇：使用Django中的Bootstrap指定導航欄專案應出現的頁面
下一篇：如何對新的JS功能提出建議？