1

私は映画マネージャーを作成して、再びレールで作業できるようにしようとしています。私はデータベースから映画を読み込んでおり、それらのカバーをレスポンシブ グリッドで表示しようとしています。

Twitter Bootstrap を使用するのは初めてで、奇妙な間隔で奇妙な問題が発生しています。私の画像はすべて同じ高さと幅なので、問題にはなりません。

問題を確認するには、http: //jsfiddle.net/32AcT/にアクセスしてください(レスポンシブ グリッドのため、ビュー ウィンドウを大きくする必要がある場合があるため、すべてが 1 つの列に表示されるわけではありません)。単に行う：

<ul class="thumbnails">
  <li>
    <a href="#">
      <div class="caption">2 Fast 2 Furious</div>
      <img alt="2 Fast 2 Furious" class="thumbnail" height="111" src="http://cf2.imgobject.com/t/p/w500/4rDV8TgaILHRfX1IRgpysjkD9A0.jpg" width="74" />
    </a>
  </li>
 ...
</ul>

これがどのように見えるかの例です（ピンクのボックスで強調表示された奇妙な間隔）： 問題が強調された例の画像

キャプションの長さが画像の幅よりも長いため、幅がオフになっている理由を理解しています（ただし、これも何とか修正したいと思います）。なぜこれが起こっているのですか、それを防ぐ良い方法はありますか?

4

2 に答える 2

3

これを試してみてください。問題が解決すると思います

http://jsfiddle.net/32AcT/1/

.thumbnails > li { width:100px; }

.thumbnails .caption{ overflow :hidden; text-overflow:ellipsis; white-space:nowrap; }

.thumbnails img{ height:111px; width:74px}

bootstrap-combined.min.css 行番号 23 の主な問題height:auto;

img {
max-width: 100%;
width: auto 9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
于 2013-04-24T06:16:38.363 に答える