Twitter Bootstrap Mediagrid /缩略图和空白空间

我试图让电影管理器让我再次使用rails再次工作。我正在从数据库中读取电影，并试图在响应式网格中呈现他们的封面。Twitter Bootstrap Mediagrid /缩略图和空白空间

我是新来的使用Twitter Bootstrap，并有一些怪异的间距奇怪的问题。我所有的图像都是相同的高度和宽度，所以这不应该成为问题。

要看到问题，请到这里：http://jsfiddle.net/32AcT/（由于响应网格，你可能不得不做出视图窗口大，所以他们不是都在一列。）我只是做：

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

这里是什么样子（怪异的间距粉红色框高亮显示）的例子：我的理解 Example Image with highlighted issues

为什么宽度都关闭，由于标题长度比图像的宽度更长（虽然我想以某种方式解决这个问题）。为什么会发生这种情况，并且有什么好的方法来防止它发生？

来源

2013-04-24 mandreko

我认为这是一个有点坏了https://github.com/twitter/bootstrap/issues/3494 – alkis 2013-04-24 04:20:43

试试这个我认为这将解决您的prblem

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}

与引导，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-24 06:16:38

这不正是我正在寻找！ – mandreko 2013-04-24 12:56:17

如果我得到问题是正确的，标题正在导致它。你对这样的解决方案有什么看法：http://jsfiddle.net/32AcT/4/

与你的解决方案的不同之处在于标题是在缩略图（见代码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-24 07:51:37

Twitter Bootstrap Mediagrid /缩略图和空白空间

回答

相关问题