具有响应功能的 Twitter Bootstrap div 分层答案

【问题标题】：Twitter Bootstrap div layering with responsive functionality具有响应功能的 Twitter Bootstrap div 分层
【发布时间】：2012-09-11 22:18:45
【问题描述】：

在我的网站上，我有一个显示表单的英雄单元。在表格后面，许多图像以平滑淡入的方式依次显示。

我正在尝试通过将容器 div 设置为 position: relative 并将保存图像的 div 设置为 position: absolute 来将 div 与带有背景图像的 div 顶部的表单分层。像这样的：

<div class="container">
   <div class="row">
      <div class="hero"
         <div class="images">
            <img ... />
         </div>

         <div class="form">

         </div>
      </div>
   </div>
</div>

container 和 row 类来自 Bootstrap。我的课程有以下风格：

.hero {
   position: relative;
}

.images {
   position: absolute;
}

这行得通。但是，当我开始调整浏览器窗口的大小并开始响应时，images div 中的图像不再调整大小，而是保持相同的固定大小。

如何在 Bootstrap 中拥有这种类型的 div 层，同时仍然充分利用 Bootstrap 的响应特性？

【问题讨论】：

好问题，希望有人能找到解决办法。

标签： twitter-bootstrap html responsive-design

【解决方案1】：

<div class="container">
   <div class="row">
      <div class="hero custom-image"
         <div class="form">
         </div>
      </div>
   </div>
</div>

也许您可以添加 .custom-image CSS。将 .custom-image width 设置为百分比。

另一种可能性，在您的自定义 CSS 中添加媒体查询：

/* Landscape phone to portrait tablet */

@media (max-width: 767px) {
.custom-image{
width:50%;
}
}

/* Landscape phones and down */

@media (max-width: 480px) {
.custom-image{
width:50%;
}
}

【讨论】：