Question

我想将我的菜单放在Bootstrap中心，但我不能将徽标放在链接旁边。

这是个主意：

我想将上面的菜单更改为以下菜单。

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更改为container。容器流体跨越可用视口的整个宽度，而容器具有基于bootstrap的xs，sm，md，lg属性的预配置宽度。

所以改变这个：

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

我相信这会产生所需效果，如图所示。

将所有导航栏置于引导程序中心

1 个答案: