2

我正在使用 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 宽度布局定义新参数没有问题，但不知道如何从一个切换到另一个（可见桌面对于这两种情况都是正确的）。

附言

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

4

3 回答 3

2

Fluid bootstap 具有 980px 和 1200px 的桌面布局。它们都被认为是桌面，因此可见桌面等响应式实用程序类对于您想要做的事情来说不够灵活。

查看响应式引导 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 请求可能足够强大，可以让你做你想做的事，并且只使用一组导航链接。

祝你好运！

于 2013-01-15T22:25:02.210 回答
1

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

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

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

于 2013-01-15T21:38:57.043 回答
0

尝试将此 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;
    }
}
于 2016-02-13T07:07:18.510 回答