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

Question

我正在制作一个投资组合页面，其中 4 个项目彼此相邻。我用 col-3 包裹的每件物品。发生的情况是，当我想给 col-3 一个边距时，col-3 下面的项目会中断并向下移动。

我认为这与一个 col-12 中的所有投资组合项目有关，所以在 4 个项目之后，我希望将接下来的 4 个项目放在一个新的 col-12 中，在那里我可以给每个项目组合一个再次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 -->

任何帮助将不胜感激。

Answer 1

如果您要嵌套 Bootstrap 的网格，请使用 .col-sm-12 > .row > .col-sm-4 之类的结构，而不是 .col-sm-12 > .col-sm-4。需要该行来抵消列上的填充。

旁边不要使用.container、.row 和.col-... 类的边距/填充。这就是您的布局崩溃的原因。如果您想要一些额外的边距，请将其添加到 .col-... 列内的 <div>。

也许看看自定义 Bootstrap 网格。最简单的方法是查看@grid-gutter-width http://getbootstrap.com/customize/