Question

在我的网站上，我有一个英雄单位，表格正在显示。在表格背后，一个接一个地显示了许多图像，并且平滑淡出。

我通过将容器div设置为position: relative以及将图像保存为position: absolute的div，尝试使用背景图像在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的响应特性？

Answer 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%;
}
}

Twitter Bootstrap div分层具有响应功能

1 个答案: