Twitter Bootstrap 3.0.3导航栏对齐导航栏标题
空勤人员
我很难将导航栏品牌徽标居中。
目前，我的徽标将向左对齐。
我实际上想将其从第一个链接居中对齐。请在下面找到示例：
请在我的代码下面在JSFiddle中找到
<div id="navbar">
<nav role="navigation" class="navbar-custom">
<div class="navbar-header">
<button data-toggle="collapse" data-target="#ren-nav-collapse" class="navbar-toggle">
<span class="sr-only">
Toggle navigation
</span>
<span class="icon-bar" />
<span class="icon-bar" />
<span class="icon-bar" />
</button>
<a href="#" class="navbar-brand">
<img src="http://i.imgur.com/CMEnIo7.png" />
</a>
</div>
<div class="collapse navbar-collapse" id="ren-nav-collapse">
<ul class="nav navbar-nav">
<li>
<a href="#">LINK 1</a>
</li>
<li>
<a href="#">LINK 2</a>
</li>
<li>
<a href="#">LINK 3</a>
</li>
<li>
<a href="#">LINK 4</a>
</li>
<li>
<a href="#">LINK 5</a>
</li>
<li>
<a href="#">LINK 6</a>
</li>
</ul>
</div>
</nav>
</div>
确实需要您的好答案。
贝纳德·帕特里克
在这里看：http : //jsfiddle.net/QSa8v/4/
HTML更改：
<div id="navbar">
<nav role="navigation" class="navbar-custom">
<div class="navbar-header col-xs-3 myheader"> // CHANGE HERE
<button data-toggle="collapse" data-target="#ren-nav-collapse" class="navbar-toggle">
<span class="sr-only">
Toggle navigation
</span>
<span class="icon-bar" />
<span class="icon-bar" />
<span class="icon-bar" />
</button>
<a href="#" class="navbar-brand mybrand"> // CHANGE HERE
<img src="http://i.imgur.com/CMEnIo7.png" />
</a>
</div>
<div class="collapse navbar-collapse" id="ren-nav-collapse">
<ul class="nav navbar-nav mybar"> // CHANGE HERE
<li>
<a href="#">LINK 1</a>
</li>
<li>
<a href="#">LINK 2</a>
</li>
<li>
<a href="#">LINK 3</a>
</li>
<li>
<a href="#">LINK 4</a>
</li>
<li>
<a href="#">LINK 5</a>
</li>
<li>
<a href="#">LINK 6</a>
</li>
</ul>
</div>
</nav>
</div>
添加了CSS：
.mybar {
margin-left:0px !important;
}
.mybrand{
float:none !important;
}
.myheader{
text-align: center;
padding: 1em;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
Twitter Bootstrap 3.0.3导航栏对齐导航栏标题
- 2
Twitter的Bootstrap 3导航栏的样式
- 3
Twitter的Bootstrap 3导航栏的样式
- 4
使用Twitter Bootstrap 3修复了导航栏
- 5
Twitter bootstrap 3导航栏导航栏右导航栏折叠
- 6
Twitter Bootstrap 3中的多个固定的顶部导航栏标题无法正常工作？
- 7
Twitter Bootstrap 3中的多个固定的顶部导航栏标题无法正常工作？
- 8
从Twitter Bootstrap 3的活动导航栏中删除链接
- 9
Twitter Bootstrap 3-导航栏不是水平的
- 10
Twitter Bootstrap 3导航栏没有响应
- 11
如何设置Twitter Bootstrap 3导航栏的颜色
- 12
Twitter Bootstrap 3导航栏在移动设备上不会崩溃
- 13
在标题中嵌入 Bootstrap 3 导航栏
- 14
Bootstrap 3导航栏
- 15
twitter bootstrap-折叠的bootstrap 3时将对象移动到导航栏
- 16
居中的Bootstrap 3导航栏
- 17
Bootstrap 3导航栏高度
- 18
Bootstrap 3，如何在导航栏上右对齐按钮？
- 19
Twitter Bootstrap更改导航栏
- 20
如何将Twitter-Bootstrap 3导航栏链接居中？
- 21
Twitter Bootstrap 3-下拉菜单中的导航栏右问题
- 22
Twitter的Bootstrap 3在同一页面上有多个导航栏
- 23
Twitter Bootstrap 3中的多个固定的顶部导航栏标头
- 24
Twitter Bootstrap 3导航栏切换按钮带有不同的图标
- 25
使用Twitter的Bootstrap 3在同一页面上的多个导航栏
- 26
Twitter Bootstrap 3导航栏切换按钮带有不同的图标
- 27
Twitter Bootstrap 3-导航栏固定顶部-多行时重叠内容
- 28
Twitter Bootstrap 3中的多个固定的顶部导航栏标头
- 29
是否可以将Twitter Bootstrap导航栏的按钮左对齐？
我来说两句