javascript - Bootstrap carousel-control 正在获取图像

标签 javascript jquery html css twitter-bootstrap

自从我开始使用它以来,我正在使用 bootstrap 中的默认轮播,我的 html 文件中有三个元素。其中之一是:

<div id="myCarousel" class="carousel">

    <ol class="carousel-indicators">
        <li class="active" data-target="#myCarousel" data-slide-to="0"></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 id="labamba">
                <img src="images/cover.jpg" alt="Cover">
            </div>

        </div>

        <div class="item">
            <div id="labamba">
                <img src="images/cover.jpg" alt="Cover">
            </div>

        </div>

        <div class="item">
            <div id="labamba">
                <img src="images/cover.jpg" alt="Cover">
            </div>

        </div>
    </div>


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

我想让我的旋转木马有很多元素,而不仅仅是一个带有标题的大图像,我试图给 div 添加广告,但是我注意到当我放一个大图像时它覆盖了旋转木马控件我不知道为什么。有人可以帮帮我吗?

CSS 覆盖:

#myCarousel {
    background-color: #222;
    background-attachment: fixed;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 0;
}

#labamba {
    font-size: 1.5vw;
    position: absolute;
    left: 15%;
    right: 15%;
    bottom: 20px;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

为什么 carousel-control 的高度和宽度太大?我可以只根据箭头大小调整它的大小吗?我不知道该怎么做,因为当我修改 css 时,它会改变位置,就像它是一个大图像而不仅仅是箭头一样。

我使用的是 Bootstrap 3.3 github 版本,我认为它是最新的,我没有修改任何东西。感谢您的帮助。

截图:

enter image description here

最佳答案

设置z-index:11;和position:relative于#myCarousel 样式。

发布指向您的 bootstrap css 的链接,我将能够帮助您解决第二个问题。

关于javascript - Bootstrap carousel-control 正在获取图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32841548/

相关文章:

javascript - 通过 iframe 模拟手机屏幕尺寸

javascript - 如何在不导入模块的情况下运行它?

jquery - 使用 jQuery .empty() 清空选择选项后,您可以恢复它们吗?

jquery - 如何在单击 HTML 按钮时呈现部分页面?

javascript - 未捕获的 TypeError 无法读取 null 的属性 'classlist'

javascript - 将随机播放与网络音频播放相结合

javascript - 在 Node js中提交表单后无法加载CSS文件

javascript - 禁用按钮上的页面背景提交点击

html - 使部分div边框透明html

html - 水平对齐 UL 和 DIV