html - 将内容 DIV 放在 Bootstrap 轮播上

Question

我正在尝试将内容 DIV 放在 Bootstrap 轮播上。所以我尝试使用 CSS 位置。但还是想不通。

这是我的 HTML -

<div id="homepage-feature" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#homepage-feature" data-slide-to="0" class="active"></li>
    <li data-target="#homepage-feature" data-slide-to="1"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
        <img src="http://placehold.it/1500X600">
        <div class="container">
            <div class="carousel-caption">
                 <h1>Changes to the Grid</h1>

                <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
                <p><a class="btn btn-large btn-primary" href="#">Learn more</a>
                </p>
            </div>
        </div>
    </div>
    <div class="item">
        <img src="http://placehold.it/1500X600">
        <div class="container">
            <div class="carousel-caption">
                 <h1>Percentage-based sizing</h1>

                <p>With "mobile-first" there is now only one percentage-based grid.</p>
                <p><a class="btn btn-large btn-primary" href="#">Browse gallery</a>
                </p>
            </div>
        </div>
    </div>
  </div><!-- /.carousel-inner -->

  <!-- Controls -->
  <a class="left carousel-control" href="#homepage-feature" data-slide="prev">
    &lsaquo;
  </a>
  <a class="right carousel-control" href="#homepage-feature" data-slide="next">
    &rsaquo;
  </a>
                  
  <div class="container">
    <div class="red"></div>
  </div>

</div><!-- /#homepage-feature.carousel -->

这是 JSFIDDLE使用我当前的代码

谁能告诉我如何解决这个问题？

谢谢。

Answer 1

是这样的吗？ http://jsfiddle.net/LzdUa/131/

我刚刚从带有 class="red"的 div 周围删除了容器 div:

<div class="red"></div>