Question

我正在使用twitter bootstrap布局.... 当我缩小浏览器窗口时，您将通过单击按钮看到菜单.... 但按钮应该只显示为iphone布局..... 但按钮显示桌面如何解决它....

http://jsfiddle.net/r4SqC/4/embedded/result/

<a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </a>

.navbar .btn-navbar {
background: none repeat scroll 0 0 #040404;
display: block;
padding: 0;
}
.navbar-inverse .btn-navbar {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #0e0e0e;
background-image: -moz-linear-gradient(top, #151515, #040404);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#040404));
background-image: -webkit-linear-gradient(top, #151515, #040404);
background-image: -o-linear-gradient(top, #151515, #040404);
background-image: linear-gradient(to bottom, #151515, #040404);
background-repeat: repeat-x;
border-color: #040404 #040404 #000000;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff151515', endColorstr='#ff040404', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

Answer 1

如果您只希望元素显示在手机上，则可以使用.visible-phone类。请参阅：http://twitter.github.com/bootstrap/scaffolding.html#responsive

下的“响应式实用程序类”

Answer 2

您可以使用媒体查询仅定位特定大小的屏幕（这将排除桌面，但包括移动浏览器，如 iPhone的那些）。 iPhone的屏幕尺寸为320px x 480像素（纵向）和480x320（横向（see here））。所以你有类似的东西：

@media only screen and (max-width: 480px) {
    selector { color: red }
}

Mozilla开发者网络有a good article going into more detail。

按钮应仅显示为iPhone

2 个答案: