导航栏中心的Twitter Bootstrap 3.0徽标

Question

我想将我的徽标放在导航栏中,我可以使用或者我应该在导航栏中使用网格布局还是我应该做其他事情:

<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
        <div class="navbar-header">
                            <!-- I want this at the center of navbar -->
            <a class="navbar-brand" href="#"><img src="logo.png"/></a>
        </div>
</div>

Answer 1

不幸的是,接受的答案是使用html for Bootstrap 2.但是,我已经提出了几种使用Bootstrap 3来实现此目的的方法.最简单的方法是使用css translate.

.navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}

现场演示:http: //codepen.io/candid/pen/dGPZvR

此方法还允许我们使用背景图像作为徽标,并允许我们在不显示文本的情况下包含文本.

HTML:

<a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text</a>

CSS:

.navbar-brand {
  background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
  width: 200px;
  transform: translateX(-50%);
  left: 50%;
  position: absolute;
}

现场演示:http://codepen.io/candid/pen/NxWoJL

如果由于某种原因你只想在移动显示器上这样做,只需在媒体查询中包装.navbar-brand ...

/* CENTER ON MOBILE ONLY */
@media (max-width: 768px) {
.navbar-brand {
        transform: translateX(-50%);
        left: 50%;
        position: absolute;
    }
}