响应式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>