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

Question

我正在制作一个作品集页面，其中 4 个项目彼此相邻。我将每件元素包裹在 col-3 中。发生的情况是，当我想给 col-3 留出边距时，col-3 下面的项目会破裂并向下移动。

我认为这与第 12 栏中的所有投资组合项目有关，因此在 4 个项目之后，我希望将接下来的 4 个项目放在新的第 12 栏中，我可以在其中为每个投资组合项目指定一个又是第 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-...类。这就是您的布局失败的原因。如果您想要一些额外的 margin ，请将其添加到 <div>里面.col-...列。

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