2016-08-19 4 views
-5

私はこのモバイルメニューを、タブレット/モバイルで表示するときに、ロゴと同じレベルに(そしてカートボタン)が(右手側に)配置されるように調整しました。このモバイルメニューが正しく整列しないのはなぜですか?

enter image description here

だけでは、それが仕事を得ることができない...とメニューがいずれかのモバイル(iOS版)に機能していません。

コンピュータでは、3つの要素の間で位置合わせが正しくないため、メニューのモバイルバージョンが正しく表示されないことが考えられます。

あなたは何が間違っているかもしれないか考えていますか?

ウェブサイト自体はhereです。

ありがとうございます。

+0

にあなたのコードを追加してください。私たちはできます」問題の視覚的側面を見ることによって正確に助けてください。コードを読む必要があります。 – Option

答えて

0

col-smクラスを使用しています。モバイル(超小型)にはcol-xsを使用してください。

0

あなたはブートストラップグリッドを使用しています。 "mobile" -breakpointでは、カラムを定義していません。 クラス.col-sm-*のDivsは100%移動してフローティングを停止します。 これを.col-xs-*に変更するか、スクリーン上の要素を浮動させるためにいくつかのスタイリングを追加して、sm-ブレークポイントを解除します。 私は第2の方法を好むでしょう。 また、カートとメニューアイコンを同じ列に合わせようとします。あなたはそれが左のロゴ整列とメニュー+カートはラインで行くことになりますあなたの.cssファイルに

.thumbnail>img, .thumbnail a>img { 
    float: left; 
} 

をこのコードを配置する必要があり

+0

お寄せいただきありがとうございましたJan. –

+0

実際に、完全に応答したい場合は、すべての画面サイズをサポートするためにすべてのcolクラスを使用する必要があります。 'col-sm- *'と 'col-xs- *'クラスの両方を定義して画面に合うようにすることができます –

+0

私は知っていますが、最小の画面サイズでは、できるだけ有効なスペースを使用するために、通常のフローティングが適用されます。 –

0

...

関連する問題