[英]How do I keep nav-tabs in boostrap fixed on the top while scrolling?
I have a Page in Rails which has 4-5 tabs.我在 Rails 中有一个页面,它有 4-5 个选项卡。 Each tab renders a partial (say a page).每个选项卡呈现一个部分(比如一个页面)。 I want to be able to keep the tabs fixed on the screen at the top or some margin from the top, even though a user scrolls down.即使用户向下滚动,我也希望能够将选项卡固定在屏幕的顶部或顶部的一些边距上。 I have used Bootstrap's <ul class="nav nav-tabs">
for tabs.我已经使用 Bootstrap 的<ul class="nav nav-tabs">
作为标签。
将类navbar-fixed-top
添加到 nav ul
@media
only screen and (your condition)
{
[class*="nav-tabs"]
{
position: fixed;
z-index: 9;
background-color: #fff;
margin-top: -11%; // adjust according to your need
}
// you are probably gonna mess up tab-content margin as well, so adjust it as I have shown below
[class*="tab-content"]
{
margin-top: 5%; // insert n% as per your need
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.