Question

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

我认为它与一个col-12中的所有投资组合项目有关，所以在4个项目之后我想在新的col-12中有接下来的4个项目，我可以在每个项目中给出portolio项目col-3再次。这样我可以玩边缘。

enter image description here

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

<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＆amp;的边距/填充。 .col-...个班级。这就是您的布局崩溃的原因。如果您想要一些额外的保证金，请将其添加到<div>列中的.col-...。

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

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

1 个答案: