我使用 bootstrap 的网格布局来创建一个概述，其中一行用作标题。此行应始终位于网格顶部。
问题是当滚动条出现时我无法处理。它以某种方式更改布局，使标题不再与行对齐(请参见下面的示例)。
将标题放入可滚动容器中可以修复布局问题，但会滚动标题。
无论滚动条是否可见，如何对齐内容和标题？
示例: 请注意每列的对齐方式稍有偏差。
.max-height {
max-height: 100px;
}<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7b1914140f080f091a0b3b4e554a5548" rel="noreferrer noopener nofollow">[email protected]</a>/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>最佳答案
这不是一个完美的解决方案，但是这样的解决方案怎么样？
我将标题列设置为 sticky-top ，并为其指定背景颜色。 然后将容器设置为overflow-auto。
.max-height {
max-height: 100px;
}<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bcded3d3c8cfc8ceddccfc89928d928f" rel="noreferrer noopener nofollow">[email protected]</a>/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>关于css - 如何使网格标题行与下面的滚动行对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70345251/