Twitter Bootstrap 轮播分享水平行答案

【问题标题】：Twitter Bootstrap carousel sharing a horizontal rowTwitter Bootstrap 轮播分享水平行
【发布时间】：2012-07-05 19:31:09
【问题描述】：

我想设置一个 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>

【问题讨论】：

标签： javascript css twitter-bootstrap carousel

【解决方案1】：

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

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

见JS Fiddle。

【讨论】：