Question

我有一个div，它是一个旋转木马 - 分别带有文字和图像。一切正常（几乎完美）:)但我想要一个带有图像的背景轮播。我是这样的： jsfiddle

<div id="background">
    <div class="carousel slide carousel-fade" data-ride="carousel">

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
          <div class="item active">
          </div>
          <div class="item">
          </div>
          <div class="item">
          </div>
      </div>
    </div>
</div>
<div id="slider" class="carousel slide col-xs-9  padd-lt0" data-ride="carousel" data-interval="3000">

    <div class="carousel-inner">
        <div class="item active">
            <img alt="First slide"4 src="http://placehold.it/1200x440/999999/cccccc" >   
        </div>
        <div class="item">
            <img alt="Second slide" src="http://placehold.it/1200x440/cccccc/ffffff">  
        </div>
        <div class="item">
            <img alt="Third slide" src="http://placehold.it/1200x440/dddddd/333333">
        </div>
    </div>
</div>

<div id="slider_captions" class="col-xs-3 ">
    <div>
        <div id="caption-0" class="carousel-caption">
            <h2>Title 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, enim. A sint repudiandae tempora, nulla aliquam</p>
        </div>
        <div id="caption-1" class="carousel-caption">
            <h2>Title 2</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, enim. A sint repudiandae tempora, nulla aliquam</p>
        </div>
        <div id="caption-2" class="carousel-caption">
            <h2>Title 3</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, enim. A sint repudiandae tempora, nulla aliquam</p>
        </div>
    </div>
</div>

当我尝试将此示例放到其他div（div .row）时，我看不到任何背景。我厌倦了z-index和背景颜色：透明 - 但没有发生任何事情。如何转换上面的示例（背景滑块），使其仅在特定div（而不是整个浏览器窗口）中工作

Bootstrap：特定div（行）中的背景轮播

0 个答案: