Twitter Bootstrap 自定义主题为 1200px / 980px答案

【问题标题】：Twitter Bootstrap custom theme for 1200px / 980pxTwitter Bootstrap 自定义主题为 1200px / 980px
【发布时间】：2016-02-13 15:07:18
【问题描述】：

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

<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 像素，但引导程序仍然认为它是桌面。我不知道如何解决它。

我为 980px 宽度布局和 1200px 宽度布局定义新参数没有问题，但不知道如何从一种切换到另一种（两种情况下可见桌面都适用）。

附言

手机的导航开关工作正常！

【问题讨论】：

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

Fluid bootstap 具有 980 像素以上和 1200 像素以上的桌面布局。它们都被视为 desktop，因此 responsive utility classes 之类的 visible-desktop 不够灵活，无法满足您的需求。

查看响应式引导 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 块的顺序通常很重要。

来自@tahdhaze09 的建议被认为是最佳实践，使用@media 请求可能足够强大，可以让您做您想做的事，并且只使用一组导航链接。

祝你好运！

【讨论】：

【解决方案2】：

您应该为所有设备使用相同的导航，并允许 CSS 处理导航格式。

查看 Bootstrap 的默认示例并检查导航代码。这些示例在您扩展和收缩视口时效果很好。

http://twitter.github.com/bootstrap/examples/hero.html

【讨论】：

【解决方案3】：

尝试将此 css 放入您的自定义 style.css 文件中

@media (min-width: 768px) and (max-width: 1280px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-header .collapse, .navbar-toggle {
        display:block !important;
    }
    .navbar-header {
        float:none;
    }
    .navbar-nav {
        float: none !important;
        margin: 0px;
    }
    .navbar-nav {
        margin: 7.5px -15px;
    }
    .nav > li {
        position: relative;
        display: block;
    }
    .navbar-nav > li {
        float: none !important;
    }
    .nav > li > a {
        position: relative;
        display: block;
        padding: 10px 15px;
    }
    .navbar-collapse {
        padding-right: 15px;
        padding-left: 15px;
        overflow-x: visible;
        border-top: 1px solid transparent;
        box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
    }
    .nav {
        padding-left: 0px;
        margin-bottom: 0px;
        list-style: outside none none;
    }
}

【讨论】：