1

我正在使用 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%;
}

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

4

1 回答 1

1

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

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

</div>

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

class="span*"

*不是一部分。

于 2013-04-15T08:07:47.070 回答