Twitter Bootstrap：图像定位

Question

我正在使用 Twitter Bootstrap 自定义我的网站。我正在尝试插入一个位于顶层的图像，该图像略微位于“容器外部”，并且可以响应地调整大小，同时保持与其他元素成比例/相对于其他元素。我想使用位置：相对，但图像似乎被强制放入容器内的一个盒子中。当我使用 position: absolute 时，图像首先在我的 Web 浏览器上正确显示，但在调整屏幕大小时它的行为不符合预期。

谁能帮我找出解决这个问题的好办法？

HTML：我没有包含在它自己的图像中，但仍然位于整体中。代码如下：

<img src="images/hero-babee.png" alt="Babee blowing bubbles." id="babee-bubbles">

CSS：这是我的自定义 CSS。

img#babee-bubbles {
z-index: 100;
position: relative;
top: 51%;
left: 7.5%;
}

如果能帮助我找到解决方案和/或帮助我的代码/语法，我将不胜感激。提前致谢。

Answer 1

要使用引导程序设计响应式网站，您可以使用引导程序布局。 流体布局具有“行流体”类，您可以在使用类作为跨度时指定宽度。 这个结构将是响应式的。要测试它，只需调整浏览器窗口的大小。

<div class="row-fluid">
  <div class="span2">
      <img>....</img>
        ......
   </div>
  <div class="span2">
  </div>
   ......

</div> 

Bootstrap 将屏幕大小分为 12 部分。我们可以通过给出

来使用该部分

class="span*"

* 不是一部分。