![导航]( "导航")
本文介绍了响应式 Twitter Bootstrap，最佳实践 - 在徽标下方创建 4 个导航按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想要 4 个导航按钮占据整个宽度，每个按钮之间有一个列间隙(好像它们是 4 个 span3 DIVS).
像这样:
这不适合我能找到的任何 Bootstrap 导航示例 - 它们都卡在顶部.
记住导航应该是一个无序列表 - 我怎样才能最好地实现它，保持它的响应性?
2013 年 9 月 19 日更新 - 下面的 JSFiddle 图片:
解决方案
您可以调整引导程序的导航栏(以下示例是引导程序 2.3.2)，使其看起来更像您的，但仍保持其响应式样式.不要忘记使用导航栏在页面上包含 jquery 和 bootstrap.js 时，或者在移动设备上查看时菜单按钮不起作用.
.navbar-内{背景:无；边界:无；}.nav li {背景:#ccc;文本对齐:居中；}@media (max-width: 979px) 和 (min-width: 768px) {.navbar [class*="span"], .navbar .row-fluid [class*="span"] {浮动:无；显示:块；宽度:100%；左边距:0；-webkit-box-sizing: 边框框；-moz-box-sizing: 边框框；box-sizing: 边框框；}}</风格><div class="navbar"><div class="navbar-inner"><div class="container-fluid"><button class="btn btn-navbar collapsed" type="button" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><div class="nav-collapse collapse"><ul class="nav row-fluid"><li class="span3"><a href="#">首页</a><li class="span3"><a href="#">关于我们</a><li class="span3"><a href="#">我们的东西</a><li class="span3"><a href="#">联系我们</a>
在此jsfiddle中，调整结果窗口的宽度以查看桌面导航栏与移动导航栏.
更新
如果您希望在没有导航栏组件的情况下执行此操作(从而丢失平板电脑/移动设备下拉列表但保持响应)，则应该使用简单的导航.试试这个 jsFiddle.代码如下:
.custom-nav .nav li a {背景色:#aaa;文本对齐:居中；白颜色;填充:6px 0;}.custom-nav .nav li a:hover,.custom-nav .nav li a:hover{背景颜色:#ccc；}@media(最大宽度:767px){.custom-nav .nav li {边距底部:2px;}}</风格><div class="custom-nav"><ul class="nav row-fluid"><li class="span3"><a href="#">首页</a><li class="span3"><a href="#">关于我们</a><li class="span3"><a href="#">我们的东西</a><li class="span3"><a href="#">联系我们</a>
I would like 4 navigation buttons to take up the full width, with a column gap between each (as if they were 4 span3 DIVS).
Like this:
This doesn't fit any of the Bootstrap navigation examples I can find - they are all stuck to the top.
Bearing in mind navigation should be an unordered list - how can I best implement this, keeping it responsive?
UPDATE 19 Sep 2013 - JSFiddle image below:
解决方案
You could adapt bootstrap's navbar (below example is bootstrap 2.3.2), making it look more like yours, but still keeping their responsive styling. Don't forget when using navbar to include jquery and bootstrap.js on your page or the menu button when viewing on mobile won't work.
<style>
.navbar-inner {
background: none;
border: none;
}
.nav li {
background: #ccc;
text-align: center;
}
@media (max-width: 979px) and (min-width: 768px) {
.navbar [class*="span"], .navbar .row-fluid [class*="span"] {
float: none;
display: block;
width: 100%;
margin-left: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
</style>
<div class="navbar">
<div class="navbar-inner">
<div class="container-fluid">
<button class="btn btn-navbar collapsed" type="button" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav row-fluid">
<li class="span3"><a href="#">Home</a>
</li>
<li class="span3"><a href="#">About Us</a>
</li>
<li class="span3"><a href="#">Our Stuff</a>
</li>
<li class="span3"><a href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
</div>
In this jsfiddle, resize the width of the results window to see desktop vs mobile navbar.
UPDATE
If you wish to do this without the navbar component (and thus losing the tablet/mobile dropdown but staying responsive), a simple nav should do. Try this jsFiddle. Code Below:
<style>
.custom-nav .nav li a {
background-color: #aaa;
text-align: center;
color : white;
padding: 6px 0;
}
.custom-nav .nav li a:hover,
.custom-nav .nav li a:hover{
background-color: #ccc;
}
@media (max-width: 767px) {
.custom-nav .nav li {
margin-bottom:2px;
}
}
</style>
<div class="custom-nav">
<ul class="nav row-fluid">
<li class="span3"><a href="#">Home</a>
</li>
<li class="span3"><a href="#">About Us</a>
</li>
<li class="span3"><a href="#">Our Stuff</a>
</li>
<li class="span3"><a href="#">Contact Us</a>
</li>
</ul>
</div>
这篇关于响应式 Twitter Bootstrap，最佳实践 - 在徽标下方创建 4 个导航按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！