Twitter 引导缩略图偏移量答案

【问题标题】：Twitter bootstrap thumbnails offsetsTwitter 引导缩略图偏移量
【发布时间】：2013-01-30 20:20:30
【问题描述】：

我遇到了缩略图无法正确折叠的问题，代码如下： https://gist.github.com/4676514

不确定为什么第 5 个缩略图向右折叠，以及为什么它不会开始新的一行？

【问题讨论】：

解决了吗？我尝试使用 javascript 来调整 $(window).load 事件中每个元素的高度。它适用于 chrome，但不适用于 Firefox。

标签： twitter-bootstrap twitter-bootstrap-rails

【解决方案1】：

也许尝试复制他们在 Bootstrap 示例中使用的布局，看看是否可行？

http://twitter.github.com/bootstrap/components.html#thumbnails

<div class="row">
  <ul class="thumbnails">
    <li class="span3">
      <img src="">
      <div class="caption">TEXT</div>
    </li>
    <li class="span3">
      <img src="">
      <div class="caption">TEXT</div>
    </li>
    <li class="span3">
      <img src="">
      <div class="caption">TEXT</div>
    </li>
    <li class="span3">
      <img src="">
      <div class="caption">TEXT</div>
    </li>
  </ul>
</div>

【讨论】：

这基本上是我已经在做的事情，并且行为相同。
你能链接到你的开发网站吗？

【解决方案2】：

这是因为您试图加载一个<div class="row"> 下的所有图像图块

而不是这样做，为每个图像行创建一个单独的行。

第一行：

<div class ="row">
  <div class="span3">image1</div>
  <div class="span3">image2</div>
  <div class="span3">image3</div>
</div>

对于第二行：

<div class ="row">
  <div class="span3">image4</div>
  <div class="span3">image5</div>
  <div class="span3">image6</div>
</div>

希望对你有帮助

【讨论】：

如果我将它们分成 3 行，它会正常工作，但会留下一个巨大的不必要的差距。如果我将它们分成 4 行，它会执行相同的行为，我不明白，第二行的第一个元素应该从左侧开始？但看起来完全一样。