在引導程序中將所有導航欄居中

Question

我想在Bootstrap中將菜單居中放置，但不能在鏈接旁邊放置徽標居中放置。

這是個主意：

http://postimg.org/image/gfi2lups1/

我想將上面的菜單更改為下面的菜單。

http://codepen.io/anon/pen/LpMbLY?editors=100

<div class="container-fluid sin-padding navbar-fixed-top">
<nav class="menu_top navbar-default menu_top" role="navigation">
  <!-- Encabezado del menu -->

  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">

      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>

    </button>
    <a class="navbar-brand" href="#"><img src="img/puma_logo.png" /></a>
  </div>


  <!-- Cuerpo del menu -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">


    <ul class="nav separacion-nav navbar-nav">

      <li class="excepcion"><a href="#">ABOUT US</a></li>
      <li class="dropdown excepcion">
        <a href="#" style="background-color: white;" class="dropdown-toggle" data-toggle="dropdown">SERVICES <b class="caret"></b></a>
        <ul class="submenu-vertical menu-hover dropdown-menu dropdown-sin-fondo">
          <li><a href="#">Cargo surveys</a></li>
            <li class="submenu-lista"><a onmouseover="this.style.color='black'" onmouseout="this.style.color='#989898'" style="color:#989898;" class="submenu-submenu" href="#">Loss / Damage Survey</a></li>
              <li class="submenu-lista"><a onmouseover="this.style.color='black'" onmouseout="this.style.color='#989898'" style="color:#989898;" class="submenu-submenu" href="#">Pre-Shipment Survey</a></li>
              <li class="submenu-lista"><a onmouseover="this.style.color='black'" onmouseout="this.style.color='#989898'" style="color:#989898;" class="submenu-submenu" href="#">Loading Survey</a></li>  
              <li class="submenu-lista"><a onmouseover="this.style.color='black'" onmouseout="this.style.color='#989898'" style="color:#989898;" class="submenu-submenu" href="#">Discharge Survey</a></li> 
              <li class="submenu-lista"><a onmouseover="this.style.color='black'" onmouseout="this.style.color='#989898'" style="color:#989898;" class="submenu-submenu" href="#">Outturn / Condition Survey</a></li> 
              <li class="submenu-lista"><a onmouseover="this.style.color='black'" onmouseout="this.style.color='#989898'" style="color:#989898;" class="submenu-submenu" href="#">Quantity Survey</a></li>
          <li><a href="#">Containers and cargo in containers surveys</a></li>
          <li><a href="#">Heavy lift, oversized and projects cargos surveys</a></li>
          <li><a href="#">Hull and machinery surveys</a></li>
          <li><a href="#">Claims handling</a></li>
        </ul>
      </li>
      <li class="excepcion"><a href="#">SPECIALIZED AUTOMOBILE SURVEYS</a></li>
      <li class="excepcion"><a href="#">CONTACT US</a></li>
      <li><a href="#"><img class="blocked" src="img/lloyd.jpg"/></a><div class="clearfix"></div></li>

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

Answer 1

您可以嘗試將包裝器div類從container-fluid更改為just container 。 容器流體跨越可用視口的整個寬度，而容器具有基於引導程序的xs，sm，md，lg屬性的預先配置的寬度。

所以改變這個：

<div class="container-fluid sin-padding navbar-fixed-top">
至
<div class="container sin-padding navbar-fixed-top">

我相信這將產生所需的效果，如您的圖像所示。