我想在大屏幕上放置4个图像，3个图像在中等屏幕上，2个图像在小屏幕上，但图像是不出现在一行中的变化行

Question

我想在大屏幕上显示4个图像，一行3个在中，2个在小，1个在超小，但图像出现在另一行，它们不是并排的，我正在从数据库中获取图像。

<div class="row">
<?php 
$get_product=get_product($con,'latest',8);
foreach($get_product as $list){
?>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="item py-2">
<div id="product" class="text-center">
<div class="image">
<a href="product.php?id=<?php echo $list['id']?>"><img
src="<?php echo PRODUCT_IMAGE_SITE_PATH.$list['image'] ?>" /></a>
</div>
<div class="detail py-2">
<h6 class="font-size-12">
<?php echo $list['name']?>
</h6>
<div class="rating text-warning">
<span><i class="fa fa-star"></i></span>
<span><i class="fa fa-star"></i></span>
<span><i class="fa fa-star"></i></span>
<span><i class="fa fa-star"></i></span>
<span><i class="fa fa-star"></i></span>
</div>
<div class="price font-size-12 m-2">
<div class="new-price">Price <span><i class="fa fa-inr" aria-hidden="true"></i>
<?php echo $list['price']?>
</span></div>
<div class="old-price">MRP <span><s><i class="fa fa-inr" aria-hidden="true"></i>
<?php echo $list['mrp']?>
</s></span>
</div>
</div>
<button type="submit" class="btn btn-warning font-size-12">Add to Cart</button>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>

Answer 1

当给中继器(用于循环(随机数量的项目时，请参阅我对Bootstrap网格布局的实现。

注意，我已经通过两种方式实现了它：

• 单行内的所有项目
• 划分为多行的所有项目

这个例子是在React中开发的(使用旧的Bootstrap版本(，但不要让它阻止你，因为逻辑是一样的。一个很大的区别是，我的解决方案每行只需要3个项目。您已经为每行4个项目完成了所有的工作。

你想使用柱。。。祝你好运；(

//this.fillRowPerRow();
this.fillAllInOneRow(); 
/**
* Generates a row for a single full-width card
* @param {Array<>} card : array of a single card
*/
generateFullRow(card) {
const column = <div className="col-xs-12">{card}</div>;
this.rows.push(<div className="row" rel="faq-teaser-list">{column}</div>);
}
/**
* Generates a row for two or three cards
* @param {Array<>} cards : array of 2 or 3 cards
*/
generateRow(cards) {
const columns = [],
css = cards.length === 3 ? 'col-lg-4' : '';
for (let i = 0; i < cards.length; i++) {
const card = <div className={`col-md-6 ${css}`}>{cards[i]}</div>;
columns.push(card);
}
this.rows.push(<div className="row" rel="faq-teaser-list">{columns}</div>);
}
/**
* Generates a row for all cards
* @param {Array<>} cards
*/
generateSingleRow(cards) {
const columns = [],
len = cards.length;
for (let i = 0; i < len; i++) {
const card = <div className={`${this.getColumnClasses(len, i)}`}>{cards[i]}</div>;
columns.push(card);
}
this.rows.push(<div className="row" rel="faq-teaser-list">{columns}</div>);
}
/**
* Usefull if you fill multiple rows for each set of col 12
*/
fillRowPerRow() {
let startSlice = 0;
const rows = Math.ceil(this.faqThemeCards.slice(startSlice).length / 3);
for (let i = 0; i < rows; i++, startSlice+=3) {
const cards = this.faqThemeCards.slice(startSlice, startSlice + 3);
switch (cards.length) {
case 1: this.generateFullRow(cards);
break;
default: this.generateRow(cards);
break;
}
}
}
/**
* Usefull if you fill a single row with all cols
*/
fillAllInOneRow() {
//this.generateFullRow(this.faqThemeCards.slice(0, 1));
this.generateSingleRow(this.faqThemeCards);
} 
/**
* Decides the responsive classes required for the columns in a single row
* This can be omitted when resolved in CSS (flex, -grow, -shrink)
* @param {number} len : length of the array
* @param {number} idx : index of the current item
* @returns string for the css classes on a single column
*/
getColumnClasses(len, idx) {
const mod2 = len % 2,
mod3 = len % 3;
let css = 'col-md-6 col-lg-4';
if (mod2 !== 0) {
if (idx === len - 1) {
css = 'col-md-12 col-lg-4';
}
}
if (mod3 !== 0) {
if (mod3 === 1 && idx >= len - 1) {
if (mod2 === 0) {
css = 'col-md-6 col-lg-12';
} else {
css = 'col-xs-12';
}
}
if (mod3 === 2 && idx >= len - 2) {
if (mod2 === 0) {
css = 'col-md-6';
} else {
if (idx === len - 2) {
css = 'col-md-6';
} else {
css = 'col-xs-12 col-lg-6';
}
}
}
}
return css;
}