javascript - Twitter Bootstrap 轮播分享水平行

Question

我想设置一个 400x400 像素的轮播，并与左侧的另一个元素共享一个水平行。例如，我有一个包含 span4 类的行类，然后是下面代码中的轮播。但是，导航控件未与轮播图像对齐（控件不会随轮播向右移动，而是保留在 span4 类所在的左侧）。

<div class="row">

  <div class="span4">
    <h2>Heading</h2>
    <p>Some Text</p>
  </div>

  <div id="this-carousel-id" class="carousel slide" style="max-width: 400px">
    <div class="carousel-inner">
      <div class="item active"><img src="http://placehold.it/400x400" alt="" />
      </div>
      <div class="item"><img src="http://placehold.it/400x400" alt="" />
      </div>
    </div>
    <!--  Carousel Controls -->
    <a class="carousel-control left" href="#this-carousel-id" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#this-carousel-id" data-slide="next">&rsaquo;</a>
  </div>

</div>

Answer 1

如果您不打算span*在轮播中使用类，则需要在轮播中添加float: left样式<div>。

或者，由于其选择器的bootstrap.css用途[class*="span"]，您可以在 carousel 上添加span（或任意类似的东西cspan-is-boring）作为类<div>。

请参阅JS 小提琴。