問題タブ [responsive]

マウスとタッチスクリーンで動作するように、ホバー ( mouseenter/ mouseleave) とイベントに応答するメニューを作成しました。click

これは非常に単純化されたバージョンです：

私が抱えている問題は、要素がタッチされたときにタッチパッドがイベントmouseenterとイベントの両方をトリガーし、クラスが追加されてからオフになることです。を追加しましたが、両方のハンドラーが同じイベントによってトリガーされます。click'active'stopImmediatePropagation()

以下のコードで、解像度が約 400px のときにブラウザーが大きな画像と小さな画像を読み込んでいる理由を理解しようとしています。解像度が小さい場合は、小さい画像をロードするだけですよね? Retina ディスプレイでも、中程度の画像をロードする必要があります。

ここ数時間、私はこれについて勉強しようと試みてきました。

JSFiddle へのリンク: https://jsfiddle.net/italoborges/v8yftgj2/2/

私は何を間違っていますか？

ありがとう。

私はこの Bootstrap シーン全体に不慣れです。画像をナビゲーションバーのブランドとして配置し、ウィンドウのサイズを変更しようとしています

私も試しimg-fluidて追加しましstyle='width:100%'たが、何も機能せず、そのサイズは常に静的です。

私は2列の応答メールに取り組んでいます。モバイルで削除する TD の 1 つで正しい境界線を取得できないことを除いて、すべてが完璧に見えます。私は次のスタイルセットを持っています：

奇妙なことに、下の境界線がうまく追加されています。

これが私のコードです。どんな助けでも大歓迎です。私はこれを理解することはできません。

私は現在、Wordpress ブログのテーマを開発しています。完全にレスポンシブでなければなりません。独立した列を持つ、より大きな画面に 2 列のレイアウトを表示したかったのです。 このような モバイルページは問題ないと思いましたが、2列のレイアウトではこのような問題がありました（下の画像）:nth-child()セレクター + floatsで 試しましたが、うまくいきませんでした。
投稿は日付順に表示する必要があります。
誰かがこの問題を解決する方法を教えてくれたら本当にありがたいです! 前もって感謝します。

編集: ブートストラップやその他のグリッド システムを使用しないでください!