首頁(yè) 猿問(wèn) 為什么Bootstrap網(wǎng)格定位會(huì)...

為什么Bootstrap網(wǎng)格定位會(huì)留下空白列？

PHP

達(dá)令說(shuō) 2021-04-07 17:19:04

我正在嘗試創(chuàng)建由PHP循環(huán)生成的Bootstrap定位網(wǎng)格。網(wǎng)格將包含11個(gè)img，并且循環(huán)迭代11次。創(chuàng)建網(wǎng)格時(shí)，我不明白為什么總是跳過(guò)2列這是我正在使用的代碼，我上傳了結(jié)果的圖片，在此處輸入由我的代碼生成的圖像描述<style></style><?php $counter = 11;echo '<div class="row " >';for ($i = 1; $i < $counter; $i++) { echo "<div class=col-md-4 > ciao <img src=pictures/venue$i.jpg alt=Flowers class=img-fluid> </div>"; if (($i+1) % 4 == 0) echo '</div><div class="row" id=my-row>';}echo '</div>';?>

查看完整描述

2 回答

皈依舞

TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超3個(gè)贊

更改此行：

if (($i+1) % 4 == 0)

對(duì)此：

if (($i) % 3 == 0)

因?yàn)榍罢邔H在第一個(gè)塊上拆分為三個(gè)，其余塊被拆分為四個(gè)。

反對(duì) 回復(fù) 2021-04-23

米脂

TA貢獻(xiàn)1836條經(jīng)驗(yàn) 獲得超3個(gè)贊

<?php

$counter = 11;

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

for ($i = 0; $i <= $counter; $i++) {

$x = $i + 1; // for venue images starting at 1

echo '<div class="col-md-4"> ciao <img src="pictures/venue' . $x . '.jpg" alt="Flowers" class="img-fluid"> </div>';

if ( ( $x ) % 3 == 0 && $i != $counter) //added $i != $counter to make sure on the last iteration an extra row isn't added and changed modulus to 3 not 4

echo '</div><div class="row" id="my-row-' . $x . '">';

}

echo '</div>';

Bootstrap運(yùn)行12列。您的代碼有一些問(wèn)題：

您將計(jì)數(shù)器從1開(kāi)始，導(dǎo)致第一個(gè)塊顯示3，但是下一個(gè)塊顯示4，依此類(lèi)推。col-md-4占用12列中的4列，因此您只能連續(xù)容納3列。
您需要確保將屬性包裝在引號(hào)中，某些瀏覽器仍會(huì)解析該屬性并按預(yù)期顯示，而其他瀏覽器則不會(huì)。
要正確顯示想要的內(nèi)容（3幅網(wǎng)格，共4行，網(wǎng)格），您需要12幅圖像，否則將始終丟失1。
提供ID的每個(gè)元素都必須是您要重復(fù)的唯一ID my-row