固定导航栏使用Twitter Bootstrap 3 [英] Fixed Navigation Bar using Twitter Bootstrap 3

问题描述

我为我的网站使用 Twitter Bootstrap 3 。

我已经使用了

但是挑战是当用户向下滚动时，导航栏显示在顶部，导航栏的宽度不是100％。

我希望导航栏的宽度为100％，即使在滚动页面后

以下是 FIDDLE 。

请在结果段中向下滚动并通知导航栏。

它消失，然后出现在某个滚动点。但是导航栏的宽度在开始时不一样。

请帮助我修复它。

c> c> c> >

  .navigation {
 background：#fff; 
 position：relative; 
 width：100％; 
} 
  

演示

I'm using Twitter Bootstrap 3 for my website. I'd like to have a fixed navigation bar which needs to be on after some certain point where the user scrolls down.

I've used Affix() and i can get the navigation bar to appeared at some certain point.

But the challenge is when the user scrolls down, the navigation bar appears on the top and the width of the navigation bar is not 100%.

I wanted the width of the navigation bar to be 100% even after scrolling the page.

Here's the FIDDLE.

Please scroll down in the result segment and notice navigation bar.

It disappears and then appears at some scroll point. But the width of the navigation bar is not the same when it was at the beginning.

Please help me in fixing it.

解决方案

Just use width: 100%; on .navigation

.navigation {
    background: #fff;
    position: relative;
    width: 100%;
}

Demo

这篇关于固定导航栏使用Twitter Bootstrap 3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！