html - 适用于1200px/980px的Twitter Bootstrap自定义主题

我正在使用twitter引导css框架。我只为桌面宽度设备（1200及以上）创建了自定义导航，并希望为每个宽度布局（980px、平板电脑、手机）创建更多导航。虽然我已经设置了visible-desktop，但当我将浏览器从1200像素调整到更小的导航栏废墟时，它仍然没有被隐藏。

<div id="navigation-div" class="span6 offset2">

    <div id="navigation-nophone" class="visible-desktop">
        <ul class="menu clearfix">
            <li class="active"><a href="">Home</a></li>
            <li><a href="">News</a></li>
            <li><a href="">Demoes</a></li>
            <li><a href="">Features</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Contact</a></li>
        </ul>
    </div>

    <div id="navigation-phone" class="visible-phone">
        <ul class="menu">
            <li class="active"><a href="">Home</a></li>
            <li><a href="">News</a></li>
            <li><a href="">Demoes</a></li>
            <li><a href="">Features</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Contact</a></li>
        </ul>
    </div>

</div>

所以我认为当窗口的大小小于1200像素时，布局宽度变为980像素，但bootstrap仍然认为它是桌面的。我不知道怎么修。
我可以为980px宽度布局和1200px宽度布局定义新的参数，但无法找到如何从一个切换到另一个（这两种情况下都是可见桌面）。
附笔。
手机导航开关工作正常！

最佳答案

Fluid bootstap具有980px以上和1200px以上的桌面布局。它们都被认为是台式机，所以responsive utility classes类似于可见的桌面对于你想做的事情来说不够灵活。
查看响应引导css文件中的@media请求，这可能是您想要的方式。
如果您是新手，这里有一个基本的例子，说明如何更改不同窗口宽度的背景色：http://jsfiddle.net/panchroma/ZNSVr/
CSS足够合理，

/* regular desktop */
@media (min-width: 980px) {
body{
background-color: green;
}

}

/* wide desktop */
@media (min-width: 1200px) {
body{
background-color: olive;
}

}

注意，不同@media块的顺序通常很重要。
来自@tahdaze09的建议被认为是最佳实践，使用@media请求可能足够强大，可以让您随心所欲，并且只使用一组导航链接。
祝你好运！