我有以下用户列表的网格布局:
col-xs-4 col-sm-4 col-md-3 col-lg-2
在我只使用 col-md-2
并使用 $counter
来确定何时需要开始新行以及何时结束现有行之前:
while ($row = $business_query->fetch_assoc()){
if ($counter % USERS_PER_ROW == 0){
$business_div .= "<div class='"row'">";
}
$business_div .= "<div class='"col-xs-4 col-sm-4 col-md-3 col-lg-2 user-container vertical-align'">
<a href='"#'">
<div class='"user-content'">
<div class='"user-img'">
</div>
<div class='"user-text v-h-align'">"
.$row["username"].
"</div>
</div>
</a>
</div>";
if ($counter % USERS_PER_ROW == USERS_PER_ROW - 1 || $counter == $num_business - 1){
$business_div .= "</div>";
}
$counter++;
我只要设置USERS_PER_ROW = 6;
,一切都会好起来的。但是,当我有 4 种不同的布局时,如何动态执行此操作?
使其成为单行,bootsrtap 将动态包装列。Afaik,在 PHP 中不可能只满足你想要什么,因为你想要的是通过引导陷阱在客户端完成的,PHP 不知道它是 xs 还是 sm,还是 lg。
我有时会做的,如果我想要每行一定数量的 col,对于特定大小,我会对索引进行模运算,并为该视图大小插入 br,例如:
<br class="clearfix visible-xs-block">
这将进行剪切,或者您可以将其设置为div而不是br,这是一个仅在该特定屏幕尺寸上可见的分隔符。