3

ブートストラップのサムネイルの高さが異なり、その問題が原因でサムネイルが正しくスタックされていない可能性があると思います (スクリーンショットとフィドルを参照)。私は彼らのために最小の高さを含める必要があると思いますが、私はそれを機能させることができません..誰か手を貸してもらえますか?

これが私が持っているコードです:

<body>
    <div class="container-fluid">
      <div class="hidden-phone">
        <a href="newBook.php">
        <button class="btn btn-large btn-primary" style="float:right; margin-top:30px;" type="button">Add Book</button>
        </a>
      </div>
      <div class="row-fluid">
        <div class="span12 well">

        <div class="row-fluid">
          <ul class="thumbnails">

            <li class="span4">
              <div class="thumbnail">
                <img src="http://placehold.it/320x200" alt="ALT NAME">
                <div class="caption">
                  <h3>Title</h3>

                  <p>Seller: Me</p>
                  <p>Email: </p>
                  <p>Cost: </p>
                  <p>Condition: </p>
                  <p align="center">
                    <a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View More information</a>
                  </p>
                </div>
              </div>
            </li> 
             <li class="span4">
              <div class="thumbnail">
                <img src="http://placehold.it/320x200" alt="ALT NAME">
                <div class="caption">
                  <h3>Title</h3>
                  <span class="label label-warning" style="margin-bottom: 10px;">Book has been sold!</span>
                  <p>Seller: Me</p>
                  <p>Email: </p>
                  <p>Cost: </p>
                  <p>Condition: </p>
                  <p align="center">
                    <a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View More information</a>
                  </p>
                </div>
              </div>
            </li> 
             <li class="span4">
              <div class="thumbnail">
                <img src="http://placehold.it/320x200" alt="ALT NAME">
                <div class="caption">
                  <h3>Title</h3>

                  <p>Seller: Me</p>
                  <p>Email: </p>
                  <p>Cost: </p>
                  <p>Condition: </p>
                  <p align="center">
                    <a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View More information</a>
                  </p>
                </div>
              </div>
            </li> 

             <li class="span4">
              <div class="thumbnail">
                <img src="http://placehold.it/320x200" alt="ALT NAME">
                <div class="caption">
                  <h3>Title</h3>

                  <p>Seller: Me</p>
                  <p>Email: </p>
                  <p>Cost: </p>
                  <p>Condition: </p>
                  <p align="center">
                    <a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View More information</a>
                  </p>
                </div>
              </div>
            </li> 
                         <li class="span4">
              <div class="thumbnail">
                <img src="http://placehold.it/320x200" alt="ALT NAME">
                <div class="caption">
                  <h3>Title</h3>

                  <p>Seller: Me</p>
                  <p>Email: </p>
                  <p>Cost: </p>
                  <p>Condition: </p>
                  <p align="center">
                    <a href="#myModal" class="btn btn-primary btn-block" data-toggle="modal">View More information</a>
                  </p>
                </div>
              </div>
            </li> 

          </ul>
        </div>
    </div>
    </div>
    </div>

  </body>

フィドル:http://jsfiddle.net/Z3VwZ/

画面: ここに画像の説明を入力 ここに画像の説明を入力

4

1 に答える 1