引导菜单折叠定制设计答案

【问题标题】：Bootstrap Menu Collapse Custom Design引导菜单折叠定制设计
【发布时间】：2014-07-16 04:32:08
【问题描述】：

我创建了一个菜单并用 CSS 设计它。现在我正在尝试使用 Bootstrap 使其响应。如您所见，在您单击按钮打开菜单（在小屏幕上）之前，一切看起来都正常工作，菜单项水平而不是垂直显示。它也不会扩展菜单的背景并渗入主要内容。我该如何解决这两个问题？有没有办法在小屏幕破坏大菜单时为小屏幕创建一个完全不同的菜单。

<nav class="center-block text-center menu bg" role="navigation">


        <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="glyphicon glyphicon-align-justify"></span> 
        </button>


        <ul class="main-nav visible-sm-inline-block navbar-collapse collapse">
          <li><a href="#home" class="button one active">Home</a></li>
          <li><a href="#about" class="button two">About</a></li>
          <li><a href="#galleries" class="button three">Galleries</a></li>
          <li><a href="#services" class="button four">Services</a></li>
          <li><a href="#media" class="button five">Media</a></li>
          <li><a href="#blog" class="button six">Blog</a></li>
          <li><a href="#contact" class="button seven">Contact</a></li>
        </ul>

      </nav>

谢谢！

【问题讨论】：

请使用 jsfiddle 或 codepen 创建一个演示。

标签： twitter-bootstrap menu responsive-design

【解决方案1】：

这里是解决方案。经过测试，工作正常。

<nav role="navigation" class="navbar navbar-default">
    <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div id="navbarCollapse" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li><a href="#home" class="button one active">Home</a></li>
            <li><a href="#about" class="button two">About</a></li>
            <li><a href="#galleries" class="button three">Galleries</a></li>
            <li><a href="#services" class="button four">Services</a></li>
            <li><a href="#media" class="button five">Media</a></li>
            <li><a href="#blog" class="button six">Blog</a></li>
            <li><a href="#contact" class="button seven">Contact</a></li>
        </ul>
    </div>
</nav>

在 responsinator.com 上查看 https://www.dropbox.com/s/65edl33z9iqpxsc/Weddings%20by%20Kathy.rar

【讨论】：

【解决方案2】：

我应该一直在使用媒体查询。伙计，我觉得自己很笨。

【讨论】：