Twitter的自助分区与响应功能分层

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类来自引导。我的课程有以下几种风格：

.hero { 
    position: relative; 
} 

.images { 
    position: absolute; 
} 

This works。但是，当我开始调整浏览器窗口大小并响应自然时，images div内的图像不再调整大小，但保持相同的固定大小。

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

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