Css 引导网格行为怪异

所以我看到引导程序和网格有一些奇怪的问题，我不知道这是引导程序错误还是我做错了什么，请看一下这个

所以这些网格之间有一些奇怪的差距，这是我的设置/代码，一开始我认为这是因为图像的大小不同，使得每一列的高度不同，但现在它有相同的图像，图像大小相同，仍然显示出问题

<div class="row">
@foreach($artikels as $artikel)
    <div class="col-md-4 post-row portfolio-item">
        <div class="portfolio-thumb">
            @if(!empty($artikel->gambar) && is_file($imagepath.$artikel->gambar."n.jpg"))
                <a class="lightbox" title="{{ $artikel->judul }}" href="{{ asset($imagepath.$artikel->gambar.".jpg") }}">
                    <div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
                    {{ HTML::image($imagepath.$artikel->gambar.'n.jpg',$artikel->judul,
                        array('class' => 'img-responsive ')) }}
                </a>
            @else
                <a class="lightbox" title="{{ $artikel->judul }}" href="{{ asset('images/image-article.jpg') }}">
                    <div class="thumb-overlay"><i class="fa fa-arrows-alt"></i></div>
                    {{ HTML::image('images/image-articlen.jpg', $artikel->judul, array(
                        'class' => 'img-responsive')) }}
                </a>
            @endif
        </div>
        <hr/>
        <div class="left-meta-post">
            <?php $date = new Date($artikel->created_at); ?>
            <div class="post-date"><span class="day">{{ $date->format('j') }}</span><span class="month">{{ $date->format('M') }}</span></div>
            <div class="post-type"><i class="fa fa-picture-o"></i></div>
        </div>
        <h3 class="post-title"><a href="{{ route('artikel_detail',array($artikel->id)) }}">{{ $artikel->judul}}</a></h3>
        <div class="post-content">
            <p>
                <a href="{{ route('artikel_detail',array($artikel->id)) }}" style="color:#666;">
                    {{ str_limit(preg_replace('/(<.*?>)|(&.*?;)/', '', $artikel->content),100) }}
                </a>
            </p>
        </div>
    </div>
@endforeach 
</div>

@外汇（$artikels作为$artikel）
@如果（！empty（$artikel->gambar）和&is_文件（$imagepath.$artikel->gambar.n.jpg”））
@否则
@恩迪夫

{{$date->format（'j'）}{{{$date->format（'M'）}


@endforeach

上面的代码基本上是制作

，然后将

col-md-4

类放入

内部

，每个

col-md-4

都用

@foreach

进行扭曲，以便从我的数据库中进行一些循环，它只是显示所有的文章

注:

我使用graygrids的margo 1.2版作为引导模板，但我曾经使用过其他模板，甚至是纯引导版本，并且经历过这种情况，在过去，我使用php为显示的每3个项目/文章添加

，它将在destop视图/我的当前视图中解决此问题，但当我切换到平板电脑时，它变成了一场噩梦，我现在才意识到这一点

编辑：

---

这里是一个工作示例/真实站点（请注意，它可能没有完全相同的项目，因为截图是从我的本地网站上截取的，但问题仍然存在）

因为你的帖子块都有不同的高度，你需要清除应用的浮动。由于您使用的是

col-4-md

，因此您需要每三次清除一次帖子

.portfolio-item:nth-child(3n+1) {
  clear: both;
}

**另一方面，您还应该看看这个CSS规则

。在
style.CSS
中发布内容p

（在我的示例中您不会看到这一点，因为只有一小部分CSS应用于它）。一个可能的解决方案是将边距从15px增加到50px，以便在992和480px之间的视口中相应地堆叠帖子。这类问题有多种解决方案，仅供参考

请参阅工作代码段

/*添加了CSS规则*/
.组合项目：第n个子项（3n+1）{
明确：两者皆有；
}
/*添加了CSS规则*/
.portfolio项：悬停。portfolio边框{
盒影：0 1px 3px#f8；
-o形盒阴影：0 1px 3px#f8；
-moz盒阴影：0 1px 3px#f8；
-网络工具包盒阴影：0 1px 3px#f8；
}
.投资组合项目.投资组合拇指{
位置：相对位置；
溢出：隐藏；
}
.portfolio item.portfolio thumb.thumb叠加{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：rgba（255，255，255，0）；
过渡：所有0.3秒的缓进缓出；
-moz转换：所有0.3秒都易于输入输出；
-webkit过渡：所有0.3轻松输入输出；
-o-过渡：所有0.3秒的缓进-缓出；
}
.portfolio项：悬停。portfolio拇指。拇指覆盖{
背景：rgba（255,255,255,0.5）；
}
.portfolio item.portfolio thumb.thumb叠加i{
颜色：rgba（255，255，255，0）；
位置：绝对位置；
最高：42%；
左：50%；
显示：块；
左边距：-27px；
利润上限：-19px；
字号：3em；
过渡：所有0.3秒的缓进缓出；
-moz转换：所有0.3秒都易于输入输出；
-webkit过渡：所有0.3轻松输入输出；
-o-过渡：所有0.3秒的缓进-缓出；
}
.portfolio项：悬停。portfolio thumb。thumb叠加i{
最高：50%；
颜色：#444；
}
.投资组合项目.投资组合详细信息{
位置：相对位置；
填充：9px 12px 6px 12px；
}
.投资组合项目.投资组合详细信息.如链接{
位置：绝对位置；
右：8px；
最高：50%；
利润上限：-9px；
}
.投资组合项目。投资组合详细信息。如链接i，
.投资组合项目.投资组合详细信息.如链接范围{
颜色：#666；
过渡：所有0.3秒的缓进缓出；
-moz转换：所有0.3秒都易于输入输出；
-webkit过渡：所有0.3轻松输入输出；
-o-过渡：所有0.3秒的缓进-缓出；
}
.portfolio项。portfolio详细信息。如链接：hover i，
.公文包项目.公文包详细信息.如链接：悬停范围{
颜色：#F54B5C；
}
.投资组合项目。投资组合详细信息。如链接i{
右侧填充：5px；
}
.投资组合项目.投资组合详细信息h4{
过渡：所有0.3秒的缓进缓出；
-moz转换：所有0.3秒都易于输入输出；
-webkit过渡：所有0.3轻松输入输出；
-o-过渡：所有0.3秒的缓进-缓出；
}
.投资组合项目.投资组合详细信息跨度{
颜色：#666；
}
.投资组合项目.投资组合详细信息跨度：之后{
内容：“，”；
右边距：2px；
}
.投资组合项目.投资组合详细信息跨度：最后一个子项：之后{
内容：“；
}
.同位素项目{
z指数：2；
}
.同位素-隐藏。同位素-项目{
指针事件：无；
z指数：1；
}
.同位素，
.同位素.同位素项目{
-webkit转换持续时间：0.8s；
-moz转换持续时间：0.8s；
过渡时间：0.8s；
}
.同位素{
-webkit转换属性：高度、宽度；
-moz过渡特性：高度、宽度；
过渡特性：高度、宽度；
}
.同位素.同位素项目{
-webkit转换属性：-webkit转换，不透明度；
-moz变换属性：-moz变换，不透明度；
过渡属性：变换、不透明度；
}
.运动{
背景#f1f1；
填充：30px0；
}
.宣传活动{
最大宽度：100%；
}
.文本中心{
边缘底部：35px；
}
#投资组合清单{
列表样式：无；
保证金：0；
填充：0；
显示：块；
}
#投资组合列表李{
位置：相对位置；
溢出：隐藏；
显示：内联块；
宽度：50%；
左边距：-1px；
保证金底部：-4px；
填充：0；
文本对齐：居中；
-webkit过渡：所有0.5s；
-moz转换：所有0.5s；
-ms转换：所有0.5s；
-o型过渡：均为0.5s；
过渡：均为0.5s；
}
#投资组合列表li h3{
背景：#fff；
底部：0；
字号：1.4em；
字体大小：300；
左：0；