使用php在四个投资组合项目后添加新的col-12

我正在制作一个公文包页面，其中4个项目相邻。每件物品我都用col-3包装。发生的是，当我想给第三列留一个边距时，第三列下面的项目会断裂并向下移动

我认为这与一个col-12中的所有投资组合项目有关，因此在4个项目之后，我希望在一个新的col-12中有接下来的4个项目，在这里，我可以给portolio项目再次设置col-3。这样我就可以利用利润了

我使用高级自定义字段来获取数据

<div class="container marketing mt130">
    <div class="col-md-12 central">
        <h1 class="mb20">Mentors</h1>       
    </div>
    <div class="col-md-12">         
            <?php 
                $mentors = get_field('mentors'); 
                    if($mentors):
                        foreach($mentors as $mentor =>$item):                               
                                        $mentor_image = $item['image_mentor'];                              
                                        $mentor_name = $item['name_mentor'];                                
                                        $mentor_location = $item['location_mentor'];                                
                                        $mentor_text = $item['text_mentor'];                            
                                        $mentor_twitter = $item['twitter_mentor'];  
                                        $mentor_fb = $item['facebook_mentor'];                              
            ?>      
        <div class="col-md-3 central">
            <div class="wrapper_mentor">
                <img src="<?php print $mentor_image ;?>" alt="<?php print $mentor_name ;?>" width="226" height="226">
                <div class="wrapper_mentor_text">
                    <h2 ><?php print $mentor_name ;?></h2>
                    <h3><span><i class="fa fa-map-marker"></i></span><?php print $mentor_location ;?></h3>  
                        <div class="popup_mentor" style="display:none;">
                            <p><?php print $text ;?></p>                                
                            <p style="padding-left:20px; text-align:left;">
                                <a href="https://<?php print $member_twitter ;?>" target="_blank"><i class="fa fa-twitter"></i></a>
                                <a href="https://<?php print $member_fb ;?>" target="_blank"><i class="fa fa-facebook"></i></a>
                            </p>
                        </div>              
                </div>
            </div>
        </div>                  
        <?php endforeach; endif; ?>                         
</div><!-- end col-md-12 -->

导师
“alt=”“width=“226”height=“226”>

---

任何帮助都将不胜感激。

如果要嵌套引导程序的网格，请使用类似

.col-sm-12>.row>.col-sm-4

的结构，而不是

.col-sm-12>.col-sm-4

。需要该行来偏移列上的填充

除此之外，不要使用

.container

，

.row

&

.col-…

类的边距/填充。这就是布局出现故障的原因。如果需要一些额外的边距，请将其添加到

.col-…

列中的

中

---

也许可以看看自定义引导网格。最简单的方法是查看

@网格槽宽度
你能在你的问题中添加一个图像来理解你到底想要实现什么吗？当然。现在我有两行，每行4个项目。只有当我想给名称和位置加一个填充时，布局才会中断。如果4个项目有一个自己的列，那么它不会断开吗？谢谢你提供的信息。如果我现在将.row添加到我的代码中，每个col-3将得到一行，但我只希望每4个投资组合项目得到一个.row或col-12，这样每4个项目都有自己的行。那么布局不会断开吗？如果你用4
col-md-3
创建一个
.row
如果你在
.central
类中添加了输出html和css，而不是php，那么调试可能会变得更容易。请记住，如果你决定在较小的屏幕上每行显示三个项目，那么每四个项目创建一行可能会成为一个问题ase使用一行，每列都在其中。我知道我需要为4个项目创建一行。现在的问题是，我想动态添加它。我使用foreach循环，所以我必须在foreach中有一个if语句，说明在每4个投资组合项目之后，我需要创建一个新行。只是我似乎不知道如何添加。我添加了一行现在在每列3中。它似乎起作用了，所以感谢ckuijjer的提示。这样做也是一个好习惯吗？不，如果要嵌套网格（在列中添加列），您只需要在列中添加
.row
。请参阅