1

I'm trying to make a movie manager to get me back working with rails again. I'm reading the movies from a database, and trying to present their covers in a responsive grid.

I'm new to using Twitter Bootstrap, and having some weird issues with weird spacing. All my images are the same height and width, so that shouldn't be an issue.

To see the issue, go here: http://jsfiddle.net/32AcT/ (Due to the responsive grid, you may have to make the view window bigger, so they're not all in a single column.) I'm simply doing:

<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>

Here is an example of what it looks like (weird spacing highlighted with pink box): Example Image with highlighted issues

I understand why the widths are off, due to the caption lengths being longer than the image's width (although I'd like to fix that somehow too). Why is this happening, and is there any good method to prevent it?

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 回答
1

如果我的问题是正确的，说明是导致它的原因。你会对这样的解决方案说什么：http: //jsfiddle.net/32AcT/4/

与您的解决方案的不同之处在于 Caption 在缩略图（见代码 1）div 内，因此宽度有限（见代码 2）。可能是您必须使用 div 的高度进行一轮比赛，但我想这将是“最佳”解决方案。

代码 1：

 <li class="span4">
        <div class="thumbnail">
            <img src="http://cf2.imgobject.com/t/p/w500/1ZjDmPKMUtout8hR77qmK1llgls.jpg">
            <div class="caption">
                <h3>Along Came a Spider</h3>
                <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
            </div>
        </div>
    </li>

代码 2：

.thumbnail{
    height:650px!important;
}
于 2013-04-24T07:51:37.240 回答