1

私のサイトは、他の多くのサイトと同様に、ホームページでブートストラップのカルーセルを利用しています。

何らかの理由で、カルーセル コントロールが表示され、他のすべてが正常に見えるにもかかわらず、データ スライド機能が 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;
    }
}

例はここで見ることができます。

4

1 に答える 1