Twitter的引导3.0徽标在导航栏

我想中心我的标志在导航栏，我可以使用或我应该使用内部导航栏网格布局或者我应该做些别的事情的中心：Twitter的引导3.0徽标在导航栏

<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>

来源

2013-10-09 torayeff

为什么不呢？我应该可以重新设计它 – torayeff

可能重复的[Bootstrap：中心一些导航栏项目]（http://stackoverflow.com/questions/17824914/bootstrap-center-some-navbar-items） – Joseph

这一直在几次之前问过，如here。

我已经成立了一个的jsfiddle类似于为你的HTML，用你的Gravatar因为您的标志，是不可用：http://jsfiddle.net/q68VS/

重要CSS：

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

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

来源

2013-10-10 00:01:05 Joseph

不幸的是，接受的答案是使用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品牌一个媒体查询...

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

来源

2015-12-08 07:00:29

对于flexbox的方法看到这个例子：http://stackoverflow.com/a/34150526/3123861 –

-1

bwillis显示的方法很好用，但我不得不添加一些边缘到我的导航栏崩溃。然后对我来说是：

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

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

我还需要我的导航栏，导航中心，然后我补充一下：

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

来源

2016-06-30 21:40:40

Twitter的引导3.0徽标在导航栏

回答

相关问题