Question

我正在使用引导网格来显示图片缩略图，其中显示的缩略图数量取决于与用户搜索条件匹配的数量。我每行显示不同数量的缩略图，具体取决于屏幕的大小，定义为：

 <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">

然后我使用以下PHP构造来创建新的row div元素：

<?php

                    for ($i = 0; $i < sizeof($products); $i++):

                        if ($i % 3 == 0) {

                            if ($i > 0)
                                echo "</div>";

                            echo "<div class=\"row\">";

                        }

                        $product = $products[$i];

                        ?>

这适用于-md和-lg，但显然不适用于-sm和-xs，我需要i%2和i%1。有人知道我可以从PHP中检索boostrap正在使用的列大小吗？

Answer 1

Bootstrap allows you to use only one row里面有大量的单元格。

如果在一行中放置的列数超过12列，则每组额外列将作为一个单元换行换行。

例如：

.photoes img {
  height: auto;
  margin-bottom: 12px;
  width: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row photoes">
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/c69/?text=Photo" alt=""></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/9c6/?text=Photo" alt=""></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/69c/?text=Photo" alt=""></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/6c9/?text=Photo" alt=""></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/96c/?text=Photo" alt=""></div>
    
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/c69/?text=Photo" alt=""></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/9c6/?text=Photo" alt=""></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/69c/?text=Photo" alt=""></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/6c9/?text=Photo" alt=""></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/96c/?text=Photo" alt=""></div>
    
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/c69/?text=Photo" alt=""></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/9c6/?text=Photo" alt=""></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/69c/?text=Photo" alt=""></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/6c9/?text=Photo" alt=""></div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"><img src="//placehold.it/900x300/96c/?text=Photo" alt=""></div>
  </div>
</div>

Bootstrap网格，每列具有不同数量的元素，具体取决于屏幕大小

1 个答案: