0

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

这是示例：http: //jsfiddle.net/G2mEv/2/

在全窗口：http: //jsfiddle.net/G2mEv/2/embedded/result/

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

Css 带有 twitter 引导程序，所以我可以提供一些 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>

任何想法如何管理这个？随意分叉我的例子。

4

2 回答 2

3

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

例如，改变这个：

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

对此：

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

如果您不想修改 Bootstrap 文件，这里讨论了如何在另一个样式表中覆盖媒体查询。

于 2013-03-16T18:37:16.563 回答
1

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

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

它应该工作。您可以在此处创建自定义引导下载，其中不包括屏幕宽度在 768 到 979 像素之间的自定义响应式 CSS：

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

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

于 2013-03-16T19:40:53.120 回答