引导:中心一些navbar项目 [英] Bootstrap: center some navbar items
问题描述
我想有一个引导导航栏,其中一些nav项目是左对齐的,一些是右对齐的,一些是在它们之间的剩余空间中心。
I would like to have a bootstrap navbar where some nav items are left-justified, some are right justified, and some are centered in the remaining space between them.
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li><a>Left</a></li>
</ul>
<ul class="nav nav-center">
<li><a>Center 1</a></li>
<li><a>Center 2</a></li>
</ul>
<ul class="nav pull-right">
<li><a>Right</a></li>
</ul>
</div>
</div>
此jsfiddle http: //jsfiddle.net/b7whs/ 显示这个 - 我喜欢中心1和中心2导航项目在一起,居中在导航栏。这是可能吗?
This jsfiddle http://jsfiddle.net/b7whs/ shows this--I'd like the Center 1 and Center 2 nav items to be together, centered in the navbar. Is this possible?
这里有很多关于如何做的建议;他们都没有为我工作。这是可能吗?
There are a lot suggestions here on SO about how to do this; none of them have worked for me. Is this even possible?
在我的例子中,左边和右边的尺寸总是相同的,所以我认为应该可行。
In my case, what's on the left and right will always be the same size, so I think it should be feasible.
推荐答案
你只需要几个样式来获得我想要的行为。它看起来像你要 display:inline-block
路由到元素的中心,所以我只是继续沿着这种方法。对现有样式,添加/修改定义,以便包含这些样式:
You just needed a couple of styles to get the behaviour that I think you wanted. It looks like you were going the display:inline-block
route to center the elements, so I'll just continue along that approach. To your existing styles, add/modify definitions so that these styles are included:
.nav.nav-center {
margin:0;
float:none;
}
.navbar-inner{
text-align:center;
}
这样,两个选项应该移动到导航栏。这里是一个 JSFiddle示例,向您展示这将是什么样子。我希望这是你正在寻找!如果没有,请与我们联络,我们很乐意进一步协助您。
With that, the two options should move to the exact center of your navigation bar. Here's a JSFiddle example to show you what this would look like. I hope this is what you were looking for! If not, let me know and I'll be happy to help further.
这篇关于引导:中心一些navbar项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!