1

2.0 と 2.1 の間の Twitter Bootstrap の何かが変更され、すばらしい Isotope 画像ライブラリを使用するときに画像サイズの単純な指定ができなくなり、正しく描画するには $(window).load または $container.imagesLoaded の代替技術を使用する必要があります (http: //isotope.metafizzy.co/docs/help.html)。見られるバグは、指定された画像の垂直方向の高さが無視されているように見え、画像が重なっているということです。画像が読み込まれるのを待つ別の形式に変更すると、ちらつきやペイントの問題という点で、エクスペリエンスが大幅に低下します。結局、Bootstrap 2.0 に戻りました。

ブートストラップの 2.1 で問題が発生することを確認しました。ここでブートストラップの変更履歴を見つけることができます: https://github.com/twitter/bootstrap/wiki/Changelog

おそらくこの破損の原因となった 2.1 の変更点と、適切な回避策があるかどうかを知っている人はいますか? 前述のように、画像が読み込まれるのを待つことは、画像の高さと幅を入力するよりもはるかに悪いため、実際には回避策ではありません.

4

1 に答える 1

0

ここに回答を投稿しました：https ：//github.com/twitter/bootstrap/issues/6541

これをCSSにインライン化すると、次のように機能します。img src = "blah-blah" width = 398 height = 265 style = "width：398px; height：265px"

実際、次のように、width属性とheight属性を使用せずにIsotopeもテストしました。imgsrc= "blah-blah" style = "width：398px; height：265px"

そしてそれはうまくいきました！CSSのみを指定する方がよい場合の推奨事項はありますか？

このCSSを使用することで、ブートストラップ（またはブートストラップ2.0）なしでこれを非常に簡単にテストできました。img{width：auto; 高さ：自動; }

CSSの幅と高さは画像のプロパティを上書きしているようです。画像が読み込まれる前に、ブラウザは割り当てるスペースの量を認識していません。画像が読み込まれた後でも、間隔は間違っています。少なくともアイソトープで。スタイルをインライン化すると、問題が回避されます。通常のスタイルを使ってみたと思いますが、うまくいかなかったようですが、CSSの優先度に問題があった可能性があります。とにかく、画像サイズは画像プロパティでレイアウトされているので、この小さなインラインCSSを入れるのはかなり自然です。アップグレードするときに他の人に確実に影響を与えるので、最終的にはより良い解決策が見つかることを願っています。

または、少なくともこれは、プロパティではなく、画像の幅と高さにインラインスタイルを使用する必要があることを文書化する必要があります。

于 2013-01-12T10:32:19.530 に答える