CSS-均匀分布的导航栏

我正在尝试均匀分布导航栏，使其在整个页面上分布，而不是像目前这样在右侧留一个间隙

我如何使用CSS实现这一点

HTML

---

我制作了一个jsfiddle:

为了均匀地分配链接，可以对

导航栏使用
display:table
，对
li
使用
display:table cell
，我会在768px以上的媒体查询中使用它，以避免改变移动视口上的导航

还添加了一些媒体查询，以补偿链接标题的字体大小和长度

*您的HTML也有一些不一致之处。收尾导航栏标题div应该在
之前。导航栏折叠
不是在之后

请参阅整页的示例代码段


.navbar.navbar-default{
背景色：#002e5d；
边界半径：0；
字号：18px；
}
.navbar.navbar-default.navbar导航>li>a{
颜色：#fff；
}
.navbar.navbar-default.navbar nav>li>a:悬停，
.navbar.navbar-default.navbar导航>li>a:焦点{
颜色：#e8e8e8；
}
.navbar.navbar-default.navbar nav>.active>a，
.navbar.navbar-default.navbar-nav>.active>a:焦点，
.navbar.navbar-default.navbar nav>.active>a:悬停{
背景色：#1b66b2；
颜色：#FFF；
}
.navbar.navbar-默认值。当前页面\项{
背景#1b66b2；
字号：700；
}
.navbar.navbar-default.navbar切换。图标栏，
.navbar.navbar-default.navbar切换。图标栏：悬停{
背景色：#fff；
}
.navbar.navbar-default.navbar切换{
边框颜色：#fff；
}
.navbar.navbar-default.navbar切换：焦点，
.navbar.navbar-default.navbar切换：悬停{
背景色：#1b66b2；
}
@介质（最大宽度：991px）和（最小宽度：768px）{
.navbar.navbar-default.navbar导航>li>a{
左侧填充：5px；
右侧填充：5px；
空白：nowrap；
}
}
@介质（最小宽度：768px）{
.navbar.navbar-default.navbar导航{
保证金：0；
显示：表格；
宽度：100%；
}
.navbar.navbar-default.navbar nav>li{
显示：表格单元格；
浮动：无；
填充顶部：10px；
垫底：10px；
}
.navbar.navbar-default.navbar导航>li>a{
文本对齐：居中；
}
.navbar默认值。navbar导航li:非（：最后一个子项）{
右边框：实心1px#FFF；
}
.navbar.navbar-default.navbar标题.navbar品牌{
显示：无；
}
}
@介质（最大宽度：767px）{
.navbar.navbar-default{
填充顶部：10px；
垫底：10px；
}
.navbar.navbar-default.navbar折叠{
边界：无；
盒影：无；
}
.navbar.navbar-default.navbar标题.navbar品牌{
颜色：#fff；
字号：28px；
字体大小：粗体；
}
}
@介质（最大宽度：360px）{
.navbar.navbar-default.navbar标题.navbar品牌{
字体大小：24px；
}
}

切换导航












默认引导样式不支持您所需的行为，因此您需要覆盖其中的几个。为方便起见，并防止这些新样式（可能）影响其他元素，我在导航栏中添加了一个
id
字段：

<div id="myNavbar" class="navbar-header">

如图所示，导航选项卡现在位于页面中央。
您看起来像这样吗。？谢谢@vanburen-我确实尝试过这个，但它弄乱了链接秀之间的边界——边界应该是什么？
/* Navigation
-------------------------*/
.navbar-default {
    background-color: #002e5d;
    border-radius: 0;
    font-size: 18px;
}

#toggle-navbar {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 100px;
    line-height: 95px;
    font-size: 2em;
    font-weight: 900;
    color: #fff;
    text-align: center;
    background: #ffcd00;
}

#toggle-navbar:hover {
  cursor: pointer;
}

.navbar {
    border-radius: 0;
    border: none;
    margin-bottom: 0;
}

.navbar-default .navbar-nav li {
    padding: 0 32px;
    height: 40px;
    margin: 10px 0;
}

.navbar-default .navbar-nav li:not(:last-child) {
    border-right: solid 1px #FFF;
}

.navbar-default .navbar-nav li a {
    color: #FFF;    
    padding: 10px;
}

.navbar-default .navbar-nav li a:hover, .navbar-default .navbar-nav li a:focus {
    color: #e8e8e8; 
}

.navbar-collapse {
    display: table;
    float: right;
    height: auto !important;
    max-height: none;
    overflow: hidden;
    padding: 0;
    position: relative;
}

.navbar-collapse.in {
  overflow: hidden;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #FFF;
}

.navbar-default .navbar-toggle {
    border-color: #FFF;
}

.navbar-default .navbar-toggle .icon-bar:hover {
    background-color: #FFF;
}

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: #1b66b2;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    background-color: #1b66b2;
    color: #FFF;
}

.navbar .current_page_item {
    background: #1b66b2;    
    border-right: none !important;
    height: 60px !important;
    margin: 0 !important;
    font-weight: 700;   
}

.navbar .current_page_item:not(:first-child) {
    margin: 0 -1px !important;
}

.navbar .current_page_item a {
    line-height: 40px !important;   
}

.menu-main-menu {
    font-size: 17px;    
}

<div id="myNavbar" class="navbar-header">

#myNavbar {
    float: none;
}
#myNavbar > .navbar-collapse {
    float: none;
}
#menu-main-menu {
    float: none;
    text-align: center;
}
#menu-main-menu > li {
    float: none;
    display: inline-block;
}