使用媒体查询管理引导程序转盘

Question

我有一个独特的转盘，用于不同高度的不同页面。当我试图管理转盘控件和用于不同屏幕大小的图标时，我使用带有以下css说明的媒体查询：

@media only screen and (min-width : 1224px) 
{
#carouselI .carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
  font-size: 24px;
  line-height: 24px;
  margin-top: -35px;
 }
#carouselR .carousel-control .icon-prev, .carousel-control .icon-next, .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {
  font-size: 24px;
  line-height: 24px;
  margin-top: -35px;
 }
}

但当我修改转盘R的设置时，它会影响到两个转盘。我不知道为什么我选择了带有#符号的对象。

有人能帮我解决这个问题吗？

感谢您在高级

用HTML代码更新的帖子：

<div class="col-xs-6 col-xs-offset-3 col-md-4 col-md-offset-0">
    <div class="container-fluid">
        <div class="row">
            <section class="block">
                <div id="carouselI" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        @{
                            int c = 0;
                            foreach (var imagen in Model.ImagenesAnuncio)
                            {
                                var itemClass = c++ == 0 ? "active" : "";
                                <li data-target="#carouselI" data-slide-to="@c" @itemClass></li>
                            }
                        }
                    </ol>
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                        @{
                            int i = 0;
                            foreach (var imagen in Model.ImagenesAnuncio)
                            {
                                var itemClass = i++ == 0 ? "item active" : "item";
                                <div class="@itemClass">
                                    <a href="@Url.Content(ViewBag.Path + imagen.NombreFichero)" data-lightbox="image-1">
                                        <div style="background:url(@Url.Action("Thumbnail", "Anuncio", new { width = 420, height = 420, filename = @imagen.NombreFichero })) center center; background-size:cover;" class="slider-size">

                                        </div>
                                    </a>
                                </div>
                            }
                        }
                    </div>
                </div>

                <!-- Controls -->
                <a class="left carousel-control" href="#carouselI" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a class="right carousel-control" href="#carouselI" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </section>
        </div>
    </div>
</div>

Answer 1

您必须在每个CSS选择器之前使用#carouselI和#carouselR。

@media only screen and (min-width: 1224px) {
  #carouselI .carousel-control .icon-prev,
  #carouselI .carousel-control .icon-next,
  #carouselI .carousel-control .glyphicon-chevron-left,
  #carouselI .carousel-control .glyphicon-chevron-right {
    font-size: 24px;
    line-height: 24px;
    margin-top: -35px;
  }
  #carouselR .carousel-control .icon-prev,
  #carouselR .carousel-control .icon-next,
  #carouselR .carousel-control .glyphicon-chevron-left,
  #carouselR .carousel-control .glyphicon-chevron-right {
    font-size: 24px;
    line-height: 24px;
    margin-top: -35px;
  }
}

CODEPEN