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;
 }
}

但是当我修改carouselR的设置时，它会影响两个旋转木马。如果我用＃符号选择对象，我不知道为什么。

任何人都可以帮我解决这个问题吗？

先谢谢你

使用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;
  }
}

使用媒体查询管理bootstrap轮播

1 个答案:

CODEPEN