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

Question

大きなデバイスでは完全に動作する私のウェブサイトにはブートストラップカルーセル（フルスクリーニングイントロ）が組み込まれていますが、モバイルデバイスではカルーセルイメージの左端の3分の1しか表示されませんが、イメージの中心にしたいと思います。 だから私は良いデバイスとタブレットとモバイルの3つの異なる設定をイメージの異なるバージョンで作成して、自分が必要とするフォーカスを持っていることを確認することをお勧めします。それは、他のすべてのカルーセル設定を隠すことによって機能するはずですが、たとえばモバイル向けのもの（小さなデバイスの場合）。そのデバイスが大型デバイスの場合は、そのデバイス以外はすべて非表示になっています。

私はモバイルデバイスのカルーセルに何かを追加したくないので、カルーセルスライダーイメージを変更したい（ただし、モバイルデバイスを使用する場合のみ）。

大きなデバイスのためのカルーセルは、idを持つdiv要素である「カルーセルは、」私は小型/モバイルデバイス上で、大きな画像でカルーセルを非表示にするには、たとえば次のように試してみました：

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

は私のために動作しませんしかし、。多分誰かが私を助けることができます！ありがとう、ありがとう！ ：3

Answer 1

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