1

I'm having a problem with thumbnails not collapsing correctly, and the code: https://gist.github.com/4676514

Not sure why that 5th thumbnail is collpasing to the right, and why it wouldn't start a new row?

Screenshot

deep
  • 97
  • 1
  • 8
  • Is this solved? I try to use javascript to adjust the height of each element on $(window).load event. It works for chrome, but not for firefox. – goFrendiAsgard Jan 18 '15 at 02:04

2 Answers2

1

Maybe try replicating the layout that they use in the Bootstrap examples and see if that works?

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>
Billy Moat
  • 20,792
  • 7
  • 45
  • 37
0

Its because you are trying to load all the image tiles under one <div class="row">

Rather than doing that way create a separate row for each of the image rows.

First row:

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

For 2nd row:

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

Hope it helps

uday
  • 8,544
  • 4
  • 30
  • 54
  • If i split them up in rows of 3 it will work fine but it leaves a huge unwanted gap. If i split them into rows of 4, it does the same behavior, which I don't understand, the first element of that 2nd row should start on the left? but it looks exactly the same. – deep Jan 31 '13 at 08:53