2

私のウェブサイトには、フォームが表示されているヒーローユニットがあります。フォームの後ろには、滑らかなフェードで次々と多数の画像が表示されています。

position: relativeコンテナのdivをに設定し、画像を保持するdivをに設定して、背景画像のある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およびクラスはrowBootstrapから取得されます。私のクラスには次のスタイルがあります。

.hero {
   position: relative;
}

.images {
   position: absolute;
}

これは機能します。ただし、ブラウザウィンドウのサイズを変更し始めてレスポンシブな性質が始まると、div内の画像のimagesサイズは変更されなくなり、同じ固定サイズのままになります。

Bootstrapのレスポンシブな性質を最大限に活用しながら、このタイプのdivレイヤーをBootstrapに含めるにはどうすればよいですか？

4

1 に答える 1

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

たぶん、.custom-imageCSSを追加できます。.custom-imagewidthをパーセンテージ％で設定します。

別の可能性として、カスタム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%;
}
}
于 2012-09-11T14:18:45.667 に答える