Bootstrap 3 使自定义导航菜单响应答案

【问题标题】：Bootstrap 3 Make Custom Navigation Menu ResponsiveBootstrap 3 使自定义导航菜单响应
【发布时间】：2015-03-26 06:01:44
【问题描述】：

我目前正在使用引导程序将 psd 转换为 html。我想利用引导响应菜单。

但我不想为非移动设备使用引导菜单，这样，如果用户在移动设备上，他将引导的响应菜单，如果他在引导中使用桌面或任何其他 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>

【问题讨论】：

如果您知道 css 的特殊性而不是问题；只需在引导 css 之后编写用于导航的 css 它将覆盖引导 css
但是我将如何强制它仅在设备不是移动设备时使用？
您可以在媒体查询中编写css，引导程序提供正在使用的媒体查询
您的意思是在引用样式表时使用 media="mobile"？
bootstrap 也使用移动优先方法，因此您还可以使用 col-xm 之类的类为移动和非移动编写不同的导航

标签： html css twitter-bootstrap menu navbar

【解决方案1】：

这是一个相当容易的任务。

你需要知道两件事。 1.媒体查询 2.引导视口断点

断点链接

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

媒体查询链接

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

使用它您可以为台式机、移动设备等设置特定的 CSS...

【讨论】：