-1

我正在使用 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);
}
4

2 回答 2

2

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

于 2013-03-28T21:15:44.757 回答
0

您可以使用媒体查询仅定位特定大小的屏幕（不包括桌面，但包括iPhone等移动浏览器）。iPhone 的屏幕尺寸为纵向 320 像素 x 480 像素，横向 480x320 （请参阅此处）。所以你会有类似的东西：

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

Mozilla 开发者网络有一篇很好的文章来详细介绍。

于 2013-03-28T21:19:23.870 回答