3

私はこれをやっています：

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span12 well">
    <div class="row-fluid">
      <ul class="thumbnails">
        <?php 
          for($i=0; $i<count($rows); $i+=1){ // EVERY ODD BOOK STARTING AT 0
        ?>
        <li class="span4">
          <div class="thumbnail">
            <img src="http://placehold.it/320x200" alt="ALT NAME">
            <div class="caption">
              <h3><?php echo $rows[$i]['Title']; ?></h3>
              <p>Seller: <?php echo $rows[$i]['FirstName'] . " " . $rows[$i]['LastName']; ?> </p>
              <p>Email: <?php echo $rows[$i]['Email']; ?></p>
              <p>Phone: <?php echo $rows[$i]['PhoneNumber']; ?></p>
              <p>Condition: <?php echo $rows[$i]['BookCondition']; ?></p>
              <p align="center"><a href="#" class="btn btn-primary btn-block">Open</a></p>
            </div>
          </div>
        </li> 
          <?php
        }
      ?>   
      </ul>
    </div>
</div>

3つ以上のアイテムがあるときはいつでも、2行目の左マージンのように見えるものによってサムネイルがずれます..

画像を参照してください:スクリーンショット

4

3 に答える 3

9

ブートストラップは、最初の要素を除くすべての要素に左マージンを追加すると思います。次のようなスタイルを追加できます。

ul.thumbnails li.span4:nth-child(3n + 4) {
  margin-left : 0px;
}

ただし、これは古いブラウザ、つまりブラウザとは互換性がないことに注意してください...

それを行う別の方法は、phpループの4番目のliごとにクラスを追加することです（これをのようなものと呼び、それ.noLeftMarginに応じてcssを設定します。

于 2013-03-22T17:35:10.187 に答える
1

.thumbnails の前の行 div を削除すると、余分な css は必要ありません。

于 2013-08-01T13:30:11.590 に答える
0

また、リセットに関する Bootstrap のドキュメントを確認することもできます。

Bootstrap.com > CSS > グリッド > レスポンシブ列のリセット

http://getbootstrap.com/css/#grid-responsive-resets

ほとんどの場合、Bootstrap の .clearfix クラスで解決できます

于 2014-06-06T12:55:22.210 に答える