css - 两行 Bootstrap 轮播指示器(28 个指示器)

Question

我有一个包含 28 张图片的 Bootstrap 4 轮播。中小型设备上的指标，指标没有断线(有些指标在某处丢失)。它不会打破换行符。

我怎样才能做到这一点？

.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 10px;
    left: 0;
    z-index: 15;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
    border-radius: 0px !important;
}

在小型设备上，只有少数指示器可见。

我做错了什么？

非常感谢。

Answer 1

解决方式:

@media screen and (max-width: 554px) {
            .carousel-indicators {
                display: table !important;
                line-height: 15px !important;
                margin-left: 18% !important;
            }
        }
@media screen and (min-width: 555px) and (max-width: 767px) {
            .carousel-indicators {
                display: table !important;
                line-height: 15px !important;
                margin-left: 18% !important;

            }
        }