以Bootstrap为中心的响应式导航栏

Question

实现我想要的响应式引导栏导航栏时遇到了一些麻烦。

我对bootstrap/css很新，而这个jsfiddle http://jsfiddle.net/YfmwV/是我迄今为止一起入侵的东西。这个问题与下面的代码有关，后者在大屏幕视图中实现了我的功能，但是在响应模式下完全破坏了菜单。

.navbar .nav>li { 
    width: 12.5%; 
} 

我试图让导航栏项目采取了导航栏的整个空间，而不是被对齐或左或右，只有这样我能想到这样做是为了设置宽度为百分比，这并不理想。

如果有人能指出我的方向真是太棒了，

Answer 1

你可以使用一个@media查询，使您的宽度：12.5％仅适用于桌面模式..

CSS

@media (min-width: 979px) { 
    .navbar .nav>li { 
     width: 12.5%; 
    } 
} 

Answer 2

我并不完全理解你的意思，但就我所能理解的而言，你希望悬停和活动效果在任何一边都没有任何填充/边距。

Navbar-inner具有20px左右的填充，如果将它们设置为0，则该栏将占用菜单的全部宽度。

.navbar-inner { 
padding-right: 0; 
padding-left: 0; 
} 

这是你的意思吗？