-1

私はtwitterのブートストラップレイアウトを使用しています....ブラウザウィンドウを縮小すると、ボタンをクリックするとメニューが表示されます....しかし、ボタンは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 の画面サイズは、縦向きで 320px x 480 px、横向きで 480x320 です (こちら を参照)。したがって、次のようになります。

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

Mozilla Developer Network には、より詳細な記事があります。

于 2013-03-28T21:19:23.870 に答える