Question

我有一个旋转木马，显示下一部分和上一张图像的部分内容，但此刻它对移动尺寸以上的任何内容都没有响应。这是代码：

<style>
        .item img:first-child,
        .item img:last-child {
            display: none;
        }
        /* Small devices (tablets, 768px and up) */
        @media (min-width: 768px) {
            .item img {
                float: left;
                /*width: 600px;*/
            }
            .item img:first-child,
            .item img:last-child {
                display: block;
            }
            .item.active {
                overflow: hidden;
                margin: 0 -546px;
            }
        }
        /* Medium devices (desktops, 992px and up) */
        @media (min-width: 992px) {
            .item img {
                /*width: 600px;*/
            }
            .item.active {
                margin: 0 -434px;
            }
        }
        /* Large devices (large desktops, 1200px and up) */
        @media (min-width: 1200px) {
            .item img {
                /*width: 600px;*/
            }
            .item.active {
                margin: 0 -427px;
            }
        }

        .carousel-inner .active.left { left: -33%; }
        .carousel-inner .next        { left:  33%; }
        .carousel-inner .prev        { left: -33%; }

    </style>

<div class="container-fluid no-pad">
        <div class="row">
            <div class="col-lg-12 no-pad">
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <!-- Wrapper for slides -->
                    <div align="center" class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                        </div>
                    </div>
                    <!-- Left and right controls -->
                    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

我希望旋转木马缩小（这就是为什么我添加了img-responsive BS类）。但目前它保持相同的大小

Answer 1

我希望这就是你要找的东西，我简化了你的CSS：

.item img {
  float:left;
  max-width:33.33% !important;
}

@media (max-width: 768px) {

  .item img {
    max-width:100% !important;  
   }

  .item img:first-child,
  .item img:last-child {
    display: none !important;
  }

}


.carousel-inner .active.left { left: -33%; }
.carousel-inner .next        { left:  33%; }
.carousel-inner .prev        { left: -33%; }

制作显示下一个/上一部分响应的Carousel

1 个答案: