html - 我如何定位 bootstrap .container？

Question

我正在尝试将内容 DIV 放置在 Bootstrap 轮播上。我很难弄清楚这一点。但我还是做不到。

这是我当前代码输出的截图。但这不是我想要的。

我想要的是，这个红色的 DIV 应该位于轮播的右侧。放置红色 DIV 时，它应该仍在 bootstrap .container 中以正确保持内容的宽度。

这是我到目前为止的标记 -

<div class="banner-content">
  <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://lorempixel.com/1500/600/abstract">
          <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>
              </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>
              </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><!-- /#homepage-feature.carousel -->

  <div class="request-form-holder container"> 
      <div class="request-form">

      </div>
  </div>

</div>

JS FIDDLE用我目前的编码。

我期望的结果应该是这样的-

希望有人能帮帮我。谢谢。

Answer 1

检查这个fiddle

刚刚添加了float:right

在 CSS 中类 class="request-form"。

这是你想要做的吗>