我如何定位引导程序 .container？答案

【问题标题】：How I position a bootstrap .container?我如何定位引导程序 .container？
【发布时间】：2015-02-27 19:38:26
【问题描述】：

我正在尝试将内容 DIV 放置在引导轮播上。我几乎想不通。但我还是做不到。

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

我想要的是，这个红色的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 与我目前的编码。

我的预期结果应该是这样的——

希望有人可以帮助我。谢谢你。

【问题讨论】：

为什么不给 .item 添加 id 并将 id 的 css 属性更改为背景图片

标签： html css twitter-bootstrap css-position

【解决方案1】：

查看fiddle

刚刚添加float:right

到 CSS 中的类 class="request-form"。

这是你想要做的吗>

【讨论】：

不，我想要旋转木马上方的这个红色 div。

【解决方案2】：

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

替换为 HTML：

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

添加到 css：

.addedthisclass { position: absolute; }
并添加到 css 到 request-form：

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

【讨论】：

【解决方案3】：

把你的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/

【讨论】：

这不是我所期望的。 Bootstrap 列不符合此要求。实际上，我想将这个 RED div 放置在轮播上。清除吗？
您的问题之前并不清楚，但您现在添加的图片有帮助。在我编辑我的答案时检查这个小提琴：jsfiddle.net/LzdUa/140
Sirence，实际上我需要把这个 Red div 放到一个引导容器中，当它定位在旋转木马上方时。有可能吗？谢谢。
Sirence，我想保持我的内容正确对齐。这就是为什么我需要在引导程序.container 下获得这个红色的div。检查此jsfiddle.net/LzdUa/142 以获得清晰的理解。
抱歉，我不太明白你到底想要什么。我很想帮助你，但现在我真的很困惑。