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进行 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;
    }
}

Answer 2

有几次问过这个问题，比如here。

由于您的徽标不可用，我使用您的Gravatar设置了与您提供的HTML类似的jsfiddle：http://jsfiddle.net/q68VS/

重要的CSS：

.nav-center {
    margin:0;
    float:none;
}

.navbar-inner{
    text-align:center;
}

Answer 3

bwillis显示的方法很有效，但我不得不为导航栏崩溃添加一些余量。然后对我来说是：

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

.navbar-collapse {
        margin-top: 50px;
}

我还需要以navbar-nav为中心，然后添加：

.navbar-nav {
    width: 100%;
    text-align: center;
}
.navbar-nav > li {
    float: none;
    display: inline-block;
}

导航栏中心的Twitter Bootstrap 3.0徽标

3 个答案: