使用移动设备时隐藏 blueimp 指示器？

Question

对于我的网站画廊，我使用 Twitter Bootstrap 和 blueimp 画廊。它工作正常，但我需要更改指示器的大小，因为我不想要像标准版 blueimp 画廊中那样的小圆圈。

这就是它通常的样子：

这就是我的版本：

所以你看，我的版本的指标更大。我喜欢这样，因为您可以更好地查看我图库中的所有图片。

但现在的问题是：

为什么我在移动设备上打开我的画廊，指示器太大..看看这个例子：

现在我尝试像这样通过媒体查询更改它：

@media(max-width:768px) {
    .blueimp-gallery>.indicator>li {
        width: 10px !important;
        height: 10px !important;
    }
}
@media(max-width:992px) {
    .blueimp-gallery>.indicator>li {
        width: 10px !important;
        height: 10px !important;
    }
}

或者这个：

@media(max-width:768px) {
    .blueimp-gallery>.indicator>li {
        display: none !important;
    }
}
@media(max-width:992px) {
    .blueimp-gallery>.indicator>li {
        display: none !important;
    }
}

但是没用..还是一样的大小，没有隐藏。

你能帮帮我吗？

编辑：

画廊的HTML：

                    <!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
                <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-use-bootstrap-modal="false">
                    <!-- The container for the modal slides -->
                    <div class="slides"></div>
                    <!-- Controls for the borderless lightbox -->
                    <h3 class="title"></h3>
                    <a class="prev">‹</a>
                    <a class="next">›</a>
                    <a class="close">×</a>
                    <a class="play-pause"></a>
                    <ol class="indicator"></ol>
                    <!-- The modal dialog, which will be used to wrap the lightbox content -->
                    <div class="modal fade">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" aria-hidden="true">&times;</button>
                                    <h4 class="modal-title"></h4>
                                </div>
                                <div class="modal-body next"></div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default pull-left prev">
                                        <i class="glyphicon glyphicon-chevron-left"></i>
                                        Previous
                                    </button>
                                    <button type="button" class="btn btn-primary next">
                                        Next
                                        <i class="glyphicon glyphicon-chevron-right"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div id="event" class="col-md-12">
                <h3 class="page-header heading-primary-a">Events & Bands</h3>
                    <a href="img/gallery/event_01.jpg" title="Events & Bands" data-gallery="#blueimp-gallery-event">
                        <img src="img/gallery/event_thumb.jpg" class="device" alt="Events & Bands">
                    </a>
                    <a href="img/gallery/event_02.jpg" title="Events & Bands" data-gallery="#blueimp-gallery-event">
                        <img src="img/gallery/event_02.jpg" alt="Events & Bands" class="hidden">
                    </a>
                    <a href="img/gallery/event_03.jpg" title="Events & Bands" data-gallery="#blueimp-gallery-event">
                        <img src="img/gallery/event_03.jpg" alt="Events & Bands" class="hidden">
                    </a>
                    <a href="img/gallery/event_04.jpg" title="Events & Bands" data-gallery="#blueimp-gallery-event">
                        <img src="img/gallery/event_04.jpg" alt="Events & Bands" class="hidden">
                    </a>
                    <a href="img/gallery/event_05.jpg" title="Events & Bands" data-gallery="#blueimp-gallery-event">
                        <img src="img/gallery/event_05.jpg" alt="Events & Bands" class="hidden">
                    </a>
                    <a href="img/gallery/event_06.jpg" title="Events & Bands" data-gallery="#blueimp-gallery-event">
                        <img src="img/gallery/event_06.jpg" alt="Events & Bands" class="hidden">
                    </a>
                    <a href="img/gallery/event_07.jpg" title="Events & Bands" data-gallery="#blueimp-gallery-event">
                        <img src="img/gallery/event_07.jpg" alt="Events & Bands" class="hidden">
                    </a>
                    <a href="img/gallery/event_08.jpg" title="Events & Bands" data-gallery="#blueimp-gallery-event">
                        <img src="img/gallery/event_08.jpg" alt="Events & Bands" class="hidden">
                    </a>
                    <a href="img/gallery/event_09.jpg" title="Events & Bands" data-gallery="#blueimp-gallery-event">
                        <img src="img/gallery/event_09.jpg" alt="Events & Bands" class="hidden">
                    </a>
                    <a href="img/gallery/event_10.jpg" title="Events & Bands" data-gallery="#blueimp-gallery-event">
                        <img src="img/gallery/event_10.jpg" alt="Events & Bands" class="hidden">
                    </a>
                </div>
           </div>

Answer 1

因此 HTML，您使用了错误的 CSS 选择器进行定位。尝试以下

@media (max-width:992px) {
  #events .page-header img {
    width: 10px;
    height: 10px;
  }
}

请避免使用!important，在CSS加载完毕后使用上面的CSS。

使用移动设备时隐藏 blueimp 指示器？

Hide blueimp indicator when using mobile device?

html

css

twitter-bootstrap

blueimp