在我的网站上,我有一个正在显示表单的英雄单元。在表单后面,许多图像以平滑的淡入淡出方式依次显示。
我正在尝试通过将容器 div 设置为 position:relative
并将保存图像的 div 设置为 来将具有背景图像的 div 顶部的表单分层position:absolute
。像这样的事情:
<div class="container">
<div class="row">
<div class="hero"
<div class="images">
<img ... />
</div>
<div class="form">
</div>
</div>
</div>
</div>
container
和 row
类来自 Bootstrap。我的类(class)有以下风格:
.hero {
position: relative;
}
.images {
position: absolute;
}
这有效。但是,当我开始调整浏览器窗口大小并且响应特性开始发挥作用时,images
div 内的图像不再调整大小,而是保持相同的固定大小。
如何在 Bootstrap 中拥有这种类型的 div 层,同时仍然充分利用 Bootstrap 的响应特性?
最佳答案
<div class="container">
<div class="row">
<div class="hero custom-image"
<div class="form">
</div>
</div>
</div>
</div>
也许您可以添加 .custom-image CSS。设置 .custom-image 宽度
(以百分比 % 表示)。
另一种可能性,在自定义 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 - Twitter Bootstrap div 分层与响应功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12171501/