Question

我知道这个主题有几个问题，我也跟着一些例子来说明我现在所处的位置。

问题在于它并没有按照我的意愿运作。

让我更好地解释一下：

基本上，我想要的只是一个带有居中徽标的导航栏，但菜单条目也在中间对齐（所以我认为navbar-left和navbar-right不是最佳选择，因为将菜单条目向左和向右移动太远。）

目前，我设法将所有内容都集中在一起（http://codepen.io/nickimola/pen/MyWKrM）：

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <a class="navbar-brand" href="#"><img src="http://www.sdsi.pti.org.pl/var/ezwebin_site/storage/images/media/images/fujitsu-logo/7830-1-pol-PL/Fujitsu-logo_imagelarge.jpg" /></a>
    <div class="collapse navbar-collapse" id="navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
</nav>

我现在不明白的是我如何修改它以便中间菜单条目（包含品牌的条目）根据图像的宽度改变宽度。

我尝试像这样添加宽度（http://codepen.io/nickimola/pen/oxNbdB）：

.navbar-brand img {
  display: inline;
  max-height: 100%;
  width:120px;
}

但显然结果不是我所期待的。

除了这个尺寸问题，其他一切都按照我想要的方式工作。我需要一些帮助，因为这是我第一次使用bootstrap，我仍然不太熟悉它是如何工作的。

由于

修改

经过一些工作，我几乎达到了我想要的地步：http://codepen.io/nickimola/pen/XdWdWK?editors=1100

我仍然需要能够垂直对齐菜单条目和徽标，然后它应该准备就绪。

Answer 1

我认为你需要一些Javascript。请参阅jQuery解决方案，如下所示。

http://codepen.io/anon/pen/ZWEWaB

$(window).on('resize', function() {
  if (window.innerWidth < 768) {
    if ($('#logo').length != 0) {
      $('.navbar-brand').unwrap('<li id="logo"></li>');
      $('.navbar-brand').insertAfter('.navbar-toggle');
    }
  } else {
    if ($('#logo').length == 0) {
      $('.navbar-brand').wrap('<li id="logo"></li>');
      $('#logo').insertAfter('.navbar-nav li:nth-child(2)');
    }
  }
}).resize();

.navbar .navbar-brand img {
  height: 100%;
  width: auto;
}
@media (min-width: 768px) {
  .navbar .navbar-nav {
    width: 100%;
    text-align: center;
  }
  .navbar .navbar-nav li {
    float: none;
    display: inline-block;
    vertical-align: middle;
  }
}

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
      <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="https://i.imgur.com/9kJixwN.png"></a>
  </div>
  <div class="collapse navbar-collapse" id="navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
</nav>

Answer 2

徽标没有将导航项目推开的原因是因为您将其置于绝对位置，因此它不在文档流程中。你可以做的是在导航项中使用nth-child来给它一些空间。我在这里分发了您的代码集：http://codepen.io/anon/pen/QNWyYP并添加了以下样式：

ul.nav.navbar-nav > li:nth-child(2) {
    margin-right: 40px;
}
ul.nav.navbar-nav > li:nth-child(3) {
    margin-left: 40px;
}

Bootstrap Navbar，品牌在中间

2 个答案: