如何在引导程序中制作固定位置行? [英] How to make fixed position row in bootstrap?
本文介绍了如何在引导程序中制作固定位置行?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个类似表格的结构,其中第一个 <div class="row">...
作为表格的标题.
我正在尝试修复它,因此当我向下滚动页面时,用户仍然可以看到列标题.
我给了它位置:固定,实现了这一点,但现在,列的宽度被破坏了.
<div class="row" style="position:fixed;"><div class="col-md-1">id</div><div class="col-md-3">L 名称</div><div class="col-md-1">M</div><div class="col-md-2">F 名称</div><div class="col-md-3">用户名</div><div class="col-md-2">电话</div></div><!-- 行--><!-- 一些数据--><div class="row"><div class="col-md-1">id</div><div class="col-md-3">L 名称</div><div class="col-md-1">M</div><div class="col-md-2">F 名称</div><div class="col-md-3">用户名</div><div class="col-md-2">电话</div></div><!-- 行-->
我真的需要它在 Chrome/FF/Safary 上工作.IE 不是问题
解决方案
试试看
我在 http://jsfiddle.net/ytJV7/2/
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="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
解决方案
Try it
<div class="container" style="position: fixed">
EDIT: I create simple example at http://jsfiddle.net/ytJV7/2/
这篇关于如何在引导程序中制作固定位置行?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文