如何在我的导航栏中添加元素

Question

我正在制作一个包含5个元素的导航栏：4个文本链接和1个徽标链接。 所有5个元素都居中并需要一个边距。 当窗口变小时，边距必须变小。

我想要实现的网格系统，但我似乎并没有得到它的工作..

这里的的jsfiddle：http://jsfiddle.net/bg9ubxq1/1/

HTML：

<nav id="menuTemp" class="navbar navbar-static-top text-center" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <a href="#" class="navbar-brand"> 
       <img src="content/images/logos/logo_mini.png" alt="logo" class="animated visible-xs visible-sm" /> 
      </a> 
      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="collapse navbar-collapse navHeaderCollapse"> 
      <ul class="nav navbar-nav custom-navbar"> 
       <li><a href="#">Diensten</a></li> 
       <li><a href="#">Technologie&euml;n</a></li> 
       <li class="visible-md visible-lg"> 
        <img src="content/images/logos/logo_mini.png" alt="logo" class="animated center-block" /> 
       </li> 
       <li><a href="#">Vacatures</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 
    </div> 
</nav>  

CSS：

.navbar-static-top .navbar-toggle .icon-bar { 
    background-color: #888; 
} 
@media (min-width:768px) { 
    .custom-navbar { 
     margin: 5px auto; 
     display: table; 
     table-layout: fixed; 
     float: none; 
     height: 51px; 
    } 
} 
#menuTemp { 
    box-shadow: 0px 5px 10px #ddd; 
    z-index: 1000; 
    height: 58px; 
} 
.nav { 
    margin-top: 3px; 
} 
.nav > li { 
    /*margin: 0 60px;*/ 
    margin: 0 20px; 
} 
.nav > li > a:hover { 
    background-color: #F5F7FA; 
} 
.nav > li > a:focus { 
    background-color: white; 
    outline: none; 
} 
.navbar-nav > li > img { 
    position: relative; 
    bottom: 1px; 
} 

Answer 1

我在一分钟前就想出了自己。 只需要应用几个媒体查询与一些像素精度调整。

当然，我仍然需要修复崩溃功能，但这不应该太难！

的jsfiddle：http://jsfiddle.net/ephy55bo/

HTML：

<nav id="menuTemp" class="navbar navbar-static-top text-center" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> <a href="#" class="navbar-brand"> 
        <img src="http://www.allphi.eu/content/images/logos/logo_mini.png" height="41" width="41" alt="AllPhi logo" class="animated hide" /> 
       </a> 

      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 

      </button> 
     </div> 
     <div class="collapse navbar-collapse navHeaderCollapse"> 
      <ul class="nav navbar-nav custom-navbar"> 
       <li><a href="#">Diensten</a> 

       </li> 
       <li><a href="#">Technologie&euml;n</a> 

       </li> 
       <li id="crop-fix"> 
        <img src="http://www.allphi.eu/content/images/logos/logo_mini.png" alt="AllPhi logo" class="animated center-block" /> 
       </li> 
       <li><a href="#">Vacatures</a> 

       </li> 
       <li><a href="#contact" data-toggle="modal">Contact</a> 

       </li> 
      </ul> 
     </div> 
    </div> 
</nav> 

CSS：

body { 
    font-family:"Segoe UI", "Arial", sans-serif; 
    font-size: 15px; 
    color: #9d9d9c; 
    height: 100%; 
    width: auto !important; 
    padding: 0px; 
    margin: 0px; 
    background-color: white; 
    -webkit-transition: all 1s linear; 
    -moz-transition: all 1s linear; 
    -o-transition: all 1s linear; 
    transition: all 1s linear; 
    -webkit-transform: translateZ(0); 
    /*smooth translation in mobile*/ 
    -webkit-font-smoothing: antialiased; 
    /*-webkit-font-smoothing:none;*/ 
} 
a { 
    color: #9d9d9c; 
    font-weight: bold; 
    text-transform: uppercase; 
} 
a:hover, a:focus { 
    color: #2394d5; 
} 
.navbar-static-top .navbar-toggle .icon-bar { 
    background-color: #888; 
} 
@media (min-width:768px) { 
    .custom-navbar { 
     margin: 5px auto; 
     display: table; 
     table-layout: fixed; 
     float: none; 
     height: 51px; 
    } 
} 
#menuTemp { 
    box-shadow: 0px 5px 10px #ddd; 
    z-index: 1000; 
    height: 58px; 
} 
.nav { 
    margin-top: 3px; 
} 
.nav > li { 
    width: 222px; 
} 
.nav > li > a:hover { 
    background-color: #F5F7FA; 
} 
.nav > li > a:focus { 
    background-color: white; 
    outline: none; 
} 
.navbar-nav > li > img { 
    position: relative; 
    bottom: 1px; 
} 
@media (min-width: 1200px) { 
    .nav > li { 
     width: 222px; 
    } 
} 
@media (min-width: 1100px) and (max-width:1199px) { 
    .nav > li { 
     width: 170px; 
    } 
} 
@media (min-width: 992px) and (max-width: 1099px) { 
    .nav > li { 
     width: 152px; 
    } 
} 
@media (min-width: 768px) and (max-width: 992px) { 
    .nav > li#crop-fix { 
     width: 95px; 
     left: 8px; 
    } 
    .nav > li { 
     width: 152px; 
    } 
}