Question

我正在使用twitter bootstrap。

我已将此添加到我的页面，以使导航栏与滚动一起使用。 <div class="nav-collapse collapse **navbar-fixed-top**">

但我似乎无法用css再次将它推到位。您可以通过删除position:fixed来查看我想要的地方。

第二个问题是，当滚动页面时，链接应该是活动的，我在哪个部分。这在某种程度上不再起作用了。

我正在使用jQuery One Page Nav Plugin和Twitter Bootstrap。

Link to live site

Answer 1

默认情况下，Bootstrap会删除平板电脑和手机的固定位置。如果要覆盖它，请尝试：

修改

@media (max-width: 979px){

    .navbar-fixed-top, .navbar-fixed-bottom {
    position: fixed;
    }  

}

对于您的菜单链接，目前您有：

<a href="#section-2">Cv</a>

链接到

 <div class="full-2">
 <div class="container-narrow">
 <div class="section" id="section-2">
 <section>
 ....

尝试将其更改为：

如果这不能解决问题，请按以下步骤移动div：

 <section id="section-2">
 <div class="full-2">
 <div class="container-narrow">

 ....

<强>更新

@media css中的语法不太正确（我之前的错误），你想要的是：

/*By default, Bootstrap removes the fixed position for tablets and phones*/
@media (max-width: 979px){

.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
    }
}

然后在你的html中你需要在你的导航栏中添加一个额外的类来指定你想要它贴上它：

<div id="top-nav" class="navbar navbar-fixed-top">

一旦完成，一切运行良好，您只需要使用下拉导航链接的样式。

现场直播：http://jsfiddle.net/panchroma/KbMvX/和http://fiddle.jshell.net/panchroma/KbMvX/show/

使用jQuery-One-Page-Nav的Bootstrap固定头

1 个答案: