twitter-bootstrap - Twitter ブートストラップ サムネイルのオフセット

Question

サムネイルが正しく折りたたまれないという問題があり、コード: https://gist.github.com/4676514

5 番目のサムネイルが右に折りたたまれている理由と、新しい行が開始されない理由がわかりませんか?

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

Answer 2

これは、すべての画像タイルを1つにロードしようとしているためです。<div class="row">

そのようにするのではなく、画像行ごとに個別の行を作成します。

最初の行：

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

2行目：

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

それが役に立てば幸い