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"]作为其选择器，您只需将span（或类似cspan-is-boring之类的任意内容）添加为轮播上的类{{} 1}}。

请参阅JS Fiddle。

Twitter Bootstrap旋转木马共享一个水平行

1 个答案: