Question

当浏览器窗口的最大宽度为767px时，我正在使用twitter bootstrap的响应功能来更改菜单样式。

在完整窗口中：http://jsfiddle.net/G2mEv/2/embedded/result/

问题是当窗口的最大宽度为979px时应用了不同的样式。但我想为767px做这个。因为我不希望为平板电脑提供不同的菜单，仅适用于手机。

Css附带了twitter bootstrap，所以我可以提供一些html

    <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-target=".nav-collapse"
                                          data-toggle="collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="#" tabindex="-1">
                    Some logo
                </a>
                <nav class="nav-collapse collapse" role="navigation">
                    <ul class="nav pull-right">
                        <li class="active"><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                    </ul>
                </nav>
            </div>
        </div>

任何想法如何管理？请随意分享我的例子。

Answer 1

您需要根据自己的喜好更改媒体查询的最小值和最大值。

例如，更改此内容：

@media (max-width: 979px) {
...
@media (min-width: 768px) {

到此：

@media (max-width: 767px) {
...
@media (min-width: ???px) {

Here's a discussion，如果您不想修改Bootstrap文件，可以如何覆盖另一个样式表中的媒体查询。

Answer 2

我想如果你只删除所有内容：

@media (min-width: 768px) and (max-width: 979px) { 
    /* delete all code */
}

它应该工作。您可以创建一个自定义的引导程序下载，其中不包括自定义响应式CSS，屏幕宽度介于768和979像素之间：

http://twitter.github.com/bootstrap/customize.html

取消选中Tablets to desktops (767-979px)并下载。

与Twitter引导程序相同的桌面和平板电脑风格

2 个答案: