twitter-bootstrap - 响应式 Twitter Bootstrap，最佳实践 - 在徽标下方创建 4 个导航按钮

Question

我想要 4 个导航按钮占据整个宽度，每个按钮之间有一个列间隙（好像它们是 4 个 span3 DIVS）。

像这样：

这不适合我能找到的任何 Bootstrap 导航示例——它们都被固定在顶部。

记住导航应该是一个无序列表 - 我怎样才能最好地实现它，保持它的响应？

2013 年 9 月 19 日更新 - JSFiddle 图片如下：

Answer 1

您可以调整 bootstrap 的导航栏（以下示例是 bootstrap 2.3.2），使其看起来更像您的，但仍保持其响应式样式。不要忘记使用导航栏在页面上包含 jquery 和 bootstrap.js 时，或者在移动设备上查看时菜单按钮不起作用。

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

在这个jsfiddle中，调整结果窗口的宽度以查看桌面与移动导航栏。

更新

如果您希望在没有导航栏组件的情况下执行此操作（从而丢失平板电脑/移动设备下拉菜单但保持响应），则应该使用简单的导航。试试这个jsFiddle。下面的代码：

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