我如何定位bootstrap .container？

Question

我正在尝试将内容DIV放在bootstrap轮播上。我几乎没有想到这一点。但我仍然不能。

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

我想要的是，这个红色DIV应位于旋转木马的右侧。放置红色DIV时，它应该仍然在引导程序.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

将您的CSS更改为：

.request-form {
    width: 300px;
    height: 300px;
    background: red;
    color: #fff;
    z-index: 100;
    position: absolute;
    top: 0;
    right: 10%;
}

http://jsfiddle.net/LzdUa/140/

Answer 2

检查此fiddle

刚刚添加了float:right

在CSS中使用 class =＆＃34; request-form＆＃34; 。

这是你想要做的＆gt;

Answer 3

https://jsfiddle.net/LzdUa/139/

替换为HTML：

• <div class="request-form"></div>

添加到css：

• .addedthisclass { position: absolute; }

• 并将css添加到请求表单中：

  .request-form { float: right; margin: 10px 50px 10px auto; position: relative;