Question

这是我正在建设的网站http://vps1-isosoft.webserve.gr/greekorama/index.php?content=home（它是希腊语，只是忽略了单词，ΑρχικήΣελίδα=主页等），我在这里面临一个问题，我试图解决它，但我不能“T

在这里。我的Carousel底部有一个水平灰色条。我不知道如何解决它。我尝试通过css编辑元素.carousel-control但它似乎没有帮助。

这是我的旋转木马代码`

        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>   

        <div class="carousel-inner">
            <div class="active item">
                <div class="carousel-caption">
                    <img src="images/assets.jpg">
                </div>
            </div>
            <div class="item">
                <div class="carousel-caption">
                    <img src="images/falakro8.jpg">
                </div>
            </div>
            <div class="item">
                <div class="carousel-caption">
                    <img src="images/ouranoupoli3.jpg">
                </div>
            </div>
        </div>

        <a class="carousel-control left" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>
</div>`

网站中存在一些小问题/错误，但它可以处理它们。不要介意他们。

Answer 1

底部的灰色栏是由img元素上的常规box-shadow css规则引起的：

img {
   border: 2px solid #fff;
   /*START PROBLEM*/
   box-shadow: 10px 10px 5px #ccc; 
   -moz-box-shadow: 10px 10px 5px #ccc;
   -webkit-box-shadow: 10px 10px 5px #ccc; 
   /*END PROBLEM*/
}

如果禁用这些框阴影规则，则灰色条会消失。

但是，这也会影响您的.img-circle元素，因此要么仅将阴影应用于.img-circle类，要么覆盖.homeCarousel img的框阴影值（并禁用背景 - .carousel-control元素的图像，这也会投射阴影）

Bootstrap 3 Carousel有水平灰色条

1 个答案: