私のサイトは、他の多くのサイトと同様に、ホームページでブートストラップのカルーセルを利用しています。
何らかの理由で、カルーセル コントロールが表示され、他のすべてが正常に見えるにもかかわらず、データ スライド機能が 480px 未満のモニター サイズ (つまり、任意のモバイル デバイス) で動作しなくなります。
@media(max-width:480px)
CSSのセクションに追加する必要があるコードのスニペットはありますか? 現状では、そのサイズの下にカルーセル/レスポンシブ関連のコードはありませんが、次のとおりです。
@media (max-width: 979px) {
.carousel .item {
height: 500px;
}
.carousel img {
width: auto;
height: 500px;
}
}
@media (max-width: 767px) {
.carousel {
margin-left: -20px;
margin-right: -20px;
}
.carousel .container {}
.carousel .item {
height: 300px;
}
.carousel img {
height: 300px;
}
.carousel-caption {
width: 65%;
padding: 0 70px;
margin-top: 100px;
}
.carousel-caption h1 {
font-size: 30px;
}
.carousel-caption .lead, .carousel-caption .btn {
font-size: 18px;
}
}
例はここで見ることができます。