html - Bootstrap 3 使自定义导航菜单响应

Question

我目前正在使用 Bootstrap 将 psd 转换为 html。我想使用 Bootstrap 响应菜单。

但我不想对非移动设备使用 Bootstrap 菜单，这样，如果用户在移动设备上，他将 Bootstrap 响应菜单，如果他在 Bootstrap 中使用台式机或任何其他 md 大小的设备，那么他应该看到我自己设计的导航菜单。我该怎么做？

我的菜单 Html 标记:

<div id="navigation" class="col-md-9 col-sm-12">
    <nav>
        <ul>
            <li><a href="#" class="selected">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Archive</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Other Pages</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </nav> <!-- end nav -->
</div>

Answer 1

这是一项相当简单的任务。

你需要知道两件事。1.媒体查询2. Bootstrap 视口(viewport)断点

断点链接

http://getbootstrap.com/css/#responsive-utilities

媒体查询链接

http://getbootstrap.com/css/#grid-media-queries

使用它，您可以为桌面、移动设备等设置特定的 CSS...