2

Twitter ブートストラップを使用していて、サムネイル画像でクロスフェード アニメーションを実行したかったので、異なる z インデックスを持つ 2 つの別個のクラスを作成し、それをサムネイル タグに入れました。次に、単純な jquery を使用して、最上位レイヤーが mouseenter でフェードアウトし、mouseleave でフェードインするようにしました。それはすべて素晴らしいように見えますが、ウィンドウのサイズを変更すると画像がうまく流れないという事実に苦労しています。

サムネイルが重なり始め、ぎこちなくサイズ変更されます。コードのサンプルを次に示します。

<div class="container">
<div class="row">

<ul class="thumbnails">
  <li class="span3">
  <div class="thumbnail top">
    <img class="hover_image" src="assets/img/hoversquare.png"/>
  </div>
  <div class="thumbnail bottom">
    <img src="assets/img/hoversquare1.png"/>
  </div>
  </li>

... (there are four of these <li> elements

私が使用したクラスは次のとおりです。

.bottom {
    position: absolute;

    z-index:1;
}

.top {
  position: absolute;
  z-index:2;
 }

また、 https ://github.com/twitter/bootstrap/blob/master/docs/assets/css/bootstrap-responsive.css の Twitter ブートストラップ CSS ファイルも含まれています。

4

1 に答える 1

0

基本的に、すべてのサイズ変更はメディアクエリを介して行われます...ニーズに合わせてcssを調整しようとします... your-responsive.cssを作成し、対処したいすべてのメディアサイズごとにスタイリングを定義しますそのファイル...ブートストラップレスポンシブcssをオーバーライドするため、必要な変更を実装できます...

于 2012-12-30T18:17:59.847 に答える