Question

我需要一些nabber的帮助，我一直在研究，并不能提出一个很好的解决方案。我想要实现的是当屏幕较小时图标位于中间，例如小型设备。

通过桌面浏览时，品牌应位于左侧，带有大徽标，右侧则为链接和按钮。

在小屏幕上查看时，我想要右侧的按钮，左侧的切换菜单和品牌图标，根据设备的宽度居中。我试过左移图标：50px;但它始终没有响应。

感谢您对任何指针的帮助，我的代码示例位于以下链接中，我使用的是谷歌上找到的这些图片，而不是我的最终图片。

我知道所有设备都有不同的屏幕尺寸，但我想如果我能成功地做一个，我可以管理其他设备，对吗？

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%);
  }
}

你仍然需要调整断点。

希望这有帮助

在导航栏中居中品牌形象

1 个答案: