Question

我对此很陌生，所以请多包涵。

这是我的摘录：

我的预期行为是第一个轮播（id轮播）具有容器的整个宽度，没有拉伸或任何变形。

当前行为是，如果正确地渲染了第二个转盘，则第一个转盘不会跨过容器的宽度。

我试图像这样使用id选择器，但是它不起作用：

    #carousel .carousel-inner .item img{

       min-width:100%;

        }

#myCarousel .carousel .item img {   //comment this block and the id carousel  renders correct (no distortion) but break the id myCarousel. 
        max-width: 100%;
        max-height: 100%;
        display: inline-block;
        position: absolute;
        bottom: 0;
        margin: 0 auto;
        left: 0;
        right: 0;
    }

就像@Honzik Kryspin。

#carousel.carousel-inner .item img{

           min-width:100%;

            }

    #myCarousel.carousel .item img {    
            max-width: 100%;
            max-height: 100%;
            display: inline-block;
            position: absolute;
            bottom: 0;
            margin: 0 auto;
            left: 0;
            right: 0;
        }

Answer 1

选择器中有空格，这意味着它将在.carousel中搜索#myCarousel。您可能希望第二个选择器为#myCarousel.carousel .item img

Answer 2

我可以在本节中通过评论来解决

#myCarousel .carousel .item img {   //comment this block and the id carousel  renders correct (no distortion) but break the id myCarousel. 
        max-width: 100%;
        max-height: 100%;
        display: inline-block;
        position: absolute;
        bottom: 0;
        margin: 0 auto;
        left: 0;
        right: 0;
    }

然后将代码直接放入img标签。真烂：（

即使ID不同，也无法设置2个轮播的样式

2 个答案: