Question

我面临的问题很简单，我创建了一个带有图像和文本的div，并且图像和文本处于循环中。所以对于桌面来说它是正确的，但对于平板电脑，我需要图像应该并排，但相反，它会低于另一个。这是平板电脑中的图像我得到

这个图像是我需要的

                <?php for ($i = 0; $i < 3; $i++) { ?>
                    
                    <div class="row padding-1">
                        <div class="col-lg-4  col-sm-3">
                            <img src="<?php echo URL ?>public/images/group.jpg" class="group-pic">
                        </div>
                        <div class="col-lg-8  col-sm-4">
						<span class="right-news" style="">VALIDATION DE QUATRE (4) GUIDES POUR LA CONDUITE DES MISSIONS DE L’IGF<span></div>

                    </div>
                <?php } ?>

我需要一些帮助。

Answer 1

尝试设置sm个较小屏幕（平板电脑）的列大小，与lg个较大屏幕（桌面）的列大小相同你已经把循环放在了行类中。更改您的代码，如下所示，

<div class="row padding-1">
<?php for ($i = 0; $i < 3; $i++) {?>

 <div class="col-lg-4 col-sm-4">
  <img src="<?php echo URL ?>public/images/group.jpg" class="group-pic">
 </div> 
 <div class="col-lg-8 col-sm-8">                         
 <span class="right-news" style="">VALIDATION DE QUATRE (4) GUIDES POUR LA CONDUITE DES MISSIONS DE L’IGF<span>
 </div> 

<?php } ?>
</div>

Answer 2

你的循环超出了.row类。因此每次都会创建一个新的.row。而是将你的循环包裹在boostrap .col-*周围。 *必须是您想要col的大小。

示例：

<div class="row">

    <?php for ($i = 0; $i < 3; $i++) { ?>

    <div class="col-md-3 col-sm-4 col-xs-6">
        <div class="row padding-1">
            <div class="col-lg-4  col-sm-3">
                <img src="<?php echo URL ?>public/images/group.jpg" class="group-pic">
            </div>
            <div class="col-lg-8  col-sm-4">
                <span class="right-news" style="">VALIDATION DE QUATRE (4) GUIDES POUR LA CONDUITE DES MISSIONS DE L’IGF<span>
            </div>
        </div>
    </div>

    <?php } ?>

</div>

循环中的图像响应

2 个答案: