Html 如何在引导程序中制作固定位置行?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/22228956/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 01:08:56  来源:igfitidea点击:

How to make fixed position row in bootstrap?

htmlcsstwitter-bootstrapgridview

提问by Itay Moav -Malimovka

I have a table-like structure, where the first <div class="row">...behave as the header for the table.
I am trying to make it fixed, so when I scroll down the page, users can still see the columns headings.
I gave it position:fixed, which achieves that, but now, the width of the columns is trashed.

我有一个类似表格的结构,其中第一个<div class="row">...作为表格的标题。
我正在尝试修复它,所以当我向下滚动页面时,用户仍然可以看到列标题。
我给了它位置:固定,实现了这一点,但现在,列的宽度被破坏了。

<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>

I really needs this to work on Chrome/FF/Safary. IE is not a concerns

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

回答by user1809655

Try it <div class="container" style="position: fixed">EDIT: I create simple example at http://jsfiddle.net/ytJV7/2/

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