在导航栏中居中品牌形象

Question

我需要一些有关 nabber 的帮助，我一直在研究但无法完全想出一个好的解决方案。我想要完成的是当屏幕很小（例如小型设备）时图标位于中间。

当通过桌面查看时，品牌应该在左侧带有大徽标，右侧是 link 和按钮。

在小屏幕上查看时，我希望右侧的按钮、左侧的切换菜单和品牌图标根据设备的宽度居中。我试过移动图标left:50px；但它并不总是有反应。

感谢您对任何指点的帮助，我的代码示例在下面的 link 中，我使用的是我在 google 上找到的这些图像，而不是我的最终图像。

我知道所有设备都有不同的屏幕尺寸，但我认为如果我能成功完成一个，我就能管理其他设备，对吗？

https://jsfiddle.net/irvgonz/mku4enff/2/

<!-- Work on this new nav -->
<nav role="navigation" class="navbar navbar-default navbar-fixed-top" width="100%" height="" id="navbar">
  <div class="container">
    <!-- Brand Logo-->
    <div class="navbar-header pull-left hidden-xs">
      <a class="navbar-brand" href="#">
        <img id="logo" alt="Brand" src="http://www.underconsideration.com/brandnew/archives/facebook_2015_logo_detail.png" />
      </a>
    </div>
    <div class="navbar-header pull-left visible-xs-block">
      <a class="navbar-brand" href="#">
        <img id="icon" src="https://image.freepik.com/free-icon/facebook-symbol_318-37686.png" />
      </a>
    </div>
    <!-- Donate Button stays outside the menu pulldown-->
    <div class="navbar-header pull-right">
      <ul class="pull-left">
        <button id="btn" type="button" class="btn btn-default navbar-btn"> <b>button</b> </button>
      </ul>
      <!-- Place for the menu collapse-->
      <button id="togglebtt" type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle collapsed">
        <span class="glyphicon glyphicon-menu-hamburger"></span>
      </button>
    </div>
    <!-- Rest of Menu -->
    <div class="collapse navbar-collapse pull-right">
      <!-- once open and collapsed items will be on left -->
      <ul class="nav nav-pills pull-left">
        <li class="header-nav">
          <a href="#" class="header-nav" id="mission"> <b>our Mission</b> </a>
        </li>
        <li class="header-nav">
          <a href="#" class="header-nav" id="join"> <b>join us</b> </a>
        </li>
        <li class="header-nav hidden-sm">
          <a href="#" class="header-nav" id="about"> <b>the team</b> </a>
        </li>
        <li class="header-nav hidden-sm">
          <a href="#" data-toggle='modal' class="header-nav" id="contact"> <b>CONTACT US</b> </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

https://jsfiddle.net/up6kcu5q/1/

在这种情况下使用 position: absolute 会起作用

@media (max-width: 767px) {
  .container > .navbar-header.visible-xs-block {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}

顺便还需要调整下断点

希望对您有所帮助

在导航栏中居中品牌形象

Centering Brand image in navbar

html

css

navbar

twitter-bootstrap