/ / 3つの異なる設定で、タブレット、モバイル、およびより広いデバイスのブートストラップカルーセルを変更するにはどうすればよいですか? - html、css、タブレット、モバイルデバイス、ブートストラップカルーセル

3つの異なる設定で、タブレット、モバイル、およびより広いデバイスのブートストラップカルーセルを変更するにはどうすればよいですか? - html、css、タブレット、モバイルデバイス、ブートストラップカルーセル

私はブートストラップカルーセル(フルスクレン私のウェブサイトでは大きなデバイスでは完全に動作しますが、モバイルデバイスではカルーセルイメージの左端の3分の1しか表示されませんが、イメージの中心にしたいと思います。 だから私は良いソリューションは、大きなデバイス、タブレット、携帯電話の3つの異なる設定でイメージの異なるバージョンを作成して、自分が望むフォーカスがあることを確認することだと思います。それは、他のすべてのカルーセル設定を隠すことによって機能するはずですが、たとえばモバイル向けのもの(小さなデバイスの場合)。そのデバイスが大型デバイスの場合は、そのデバイス以外はすべて非表示になっています。

私はモバイルデバイス上のカルーセルに何かを追加したくないので、カルーセルスライダーイメージを変更したい(ただし、モバイルデバイスが使用されている場合のみ)。

大きなデバイスのカルーセルはidの「カルーセル」のdivにありますので、小さな/モバイルデバイスの大きな画像でカルーセルを隠すために、このように試しました:

@media (max-width:800px) {
#carousel {
display:none !important;
}
}

しかし、誰かが私を助けてくれるかもしれません!ありがとう!ありがとう!3

回答:

回答№1は1

ブートストラップを使用すると、画面サイズに応じて非表示にすることができます。 このページで「Responsive Utilities」のセクションを参照してください。 あなたは、 ".hidden-xs"や ".hidden-lg"のようなものを見るでしょう。複数のカルーセルを作る必要があります.1つはモバイル用、もう1つはタブレット用、もう1つはデスクトップ用です。 。