如何使用bootstrap在全屏中心设置菜单？

Question

我想使用导航栏在中心的菜单。有可能吗？

HTML：

    <header class="header-area">
        <nav class="header-nav navbar">
            <div class="container-fluid">
                <ul class="nav navbar-nav list-inline text-center">
                    <li><a href="#">About us</a></li>
                    <li><a href="#">Work</a></li>
                    <li><a href="#"><img src="images/logo1.png" class="img-responsive" alt="website-logo" /></a></li>
                    <li><a href="#">Shop</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </nav>
    </header>

CSS：

.header-area {
    background: url("images/background1.jpg") no-repeat 0 0 / 100% 100%;
    color: #84828D;
}
.header-nav .nav.navbar-nav {
    width: 80%;
    margin: auto;
    float: inherit;
}

以下是示例图片：

Answer 1

在这里增加宽度

.header-nav .nav.navbar-nav {
    width: 100%;
    margin: auto;
    float: inherit;
}

并添加以下CSS

.navbar .nav, .navbar .nav > li {
  float:none;
  display:inline-block;
  *display:inline; /* ie7 fix */
  *zoom:1; /* hasLayout ie7 trigger */
  vertical-align: middle;
}

.navbar-inner {
  text-align:center;
}

注意：你在课堂上有**，

<nav class="header-nav navbar**">**

应该是

<nav class="header-nav navbar">**

Fiddle Example