如何在 Bootstrap 中做定位行?

i2byvkas  于 2022-12-16  发布在  Bootstrap
关注(0)|答案(2)|浏览(110)

我有一个类似表格的结构,其中第一个<div class="row">...充当表格的标题。
我正在尝试修复它,这样当我向下滚动页面时,用户仍然可以看到列标题。
我给了它position:fixed,这就达到了,但是现在,列的宽度被破坏了。

<div class="container">
            <div class="row" style="position:fixed;">
                <div class="col-md-1">id</div>
                <div class="col-md-3">L Name</div>
                <div class="col-md-1">M</div>
                <div class="col-md-2">F Name</div>
                <div class="col-md-3">Username</div>
                <div class="col-md-2">Phone</div>
            </div><!-- row -->
<!-- some data -->
            <div class="row">
                <div class="col-md-1">id</div>
                <div class="col-md-3">L Name</div>
                <div class="col-md-1">M</div>
                <div class="col-md-2">F Name</div>
                <div class="col-md-3">Username</div>
                <div class="col-md-2">Phone</div>
            </div><!-- row -->
</div>

我真的需要这个在Chrome/FF/Safary上工作。IE不是一个问题

hs1rzwqc

hs1rzwqc1#

试试看<div class="container" style="position: fixed">编辑:我在http://jsfiddle.net/ytJV7/2/上创建了一个简单的示例

y3bcpkx1

y3bcpkx12#

引导CSS中也有sticky-top类
Fiddle with example

<div class="container">
        <div class="row sticky-top bg-white">...

相关问题