引导网格表现得很奇怪

时间:2016-01-01 22:35:38

标签: css twitter-bootstrap

所以我看到bootstrap对网格有一些奇怪的问题,我不知道这是bootstrap bug还是我做错了什么,请看看这个 enter image description here

因此这些网格之间存在一些奇怪的差距,这里首先是我的设置/代码我认为这是因为不同尺寸的图像使每个列的高度不同,但是现在嘿它具有相同的图像相同的图像尺寸,仍然在这里显示问题....

<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>

那里的代码基本上是<row>,然后将col-md-4类放入<div> <row>内,col-md-4每个@foreach都被<row>变形1}}从我的数据库做一些循环,它只显示所有文章

请注意:

我使用gregogrids的margo 1.2版作为bootstrap模板但是我甚至使用其他模板甚至是纯引导版本并且经历了这个,过去我使用php为每个3项添加 Average memory access time = 30% * (1 + 3% * 72) + 100% * (1 + M*72) /文章显示它将解决这个问题在destop视图/我当前的视图,但当我切换到平板电脑它变成噩梦,我只是意识到现在

编辑: 这里是工作示例/真实网站my site(请注意,它可能没有完全相同的项目,因为截图是从我的本地网站获取但问题仍然存在)

1 个答案:

答案 0 :(得分:1)

因为你的帖子块每个都有不同的高度,你需要清除所应用的浮动。由于您使用的是col-4-md,因此您需要清除每个第3个帖子。

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

**在旁注中,你还应该看看.post-content p内部的这个CSS规则style.css(你不会在我的例子中看到这个,因为你的CSS中只有一小部分是适用于它)。一种可能的解决方案是将边距从15px增加到50px,这样您的帖子就可以在992和480px之间的视口上相应地堆叠。对于类似这样的事情,有多种解决方案,因为它仅仅是一个FYI。

请参阅工作代码段。

/*ADDED CSS RULE*/

.portfolio-item:nth-child(3n+1) {
  clear: both;
}
/*ADDED CSS RULE*/

.portfolio-item:hover .portfolio-border {
  box-shadow: 0 1px 3px #f8f8f8;
  -o-box-shadow: 0 1px 3px #f8f8f8;
  -moz-box-shadow: 0 1px 3px #f8f8f8;
  -webkit-box-shadow: 0 1px 3px #f8f8f8;
}
.portfolio-item .portfolio-thumb {
  position: relative;
  overflow: hidden;
}
.portfolio-item .portfolio-thumb .thumb-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0);
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}
.portfolio-item:hover .portfolio-thumb .thumb-overlay {
  background: rgba(255, 255, 255, 0.5);
}
.portfolio-item .portfolio-thumb .thumb-overlay i {
  color: rgba(255, 255, 255, 0);
  position: absolute;
  top: 42%;
  left: 50%;
  display: block;
  margin-left: -27px;
  margin-top: -19px;
  font-size: 3em;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}
.portfolio-item:hover .portfolio-thumb .thumb-overlay i {
  top: 50%;
  color: #444;
}
.portfolio-item .portfolio-details {
  position: relative;
  padding: 9px 12px 6px 12px;
}
.portfolio-item .portfolio-details .like-link {
  position: absolute;
  right: 8px;
  top: 50%;
  margin-top: -9px;
}
.portfolio-item .portfolio-details .like-link i,
.portfolio-item .portfolio-details .like-link span {
  color: #666;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}
.portfolio-item .portfolio-details .like-link:hover i,
.portfolio-item .portfolio-details .like-link:hover span {
  color: #F54B5C;
}
.portfolio-item .portfolio-details .like-link i {
  padding-right: 5px;
}
.portfolio-item .portfolio-details h4 {
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}
.portfolio-item .portfolio-details a span {
  color: #666;
}
.portfolio-item .portfolio-details span:after {
  content: ", ";
  margin-right: 2px;
}
.portfolio-item .portfolio-details span:last-child:after {
  content: "";
}
.isotope-item {
  z-index: 2;
}
.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}
.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  transition-duration: 0.8s;
}
.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  transition-property: height, width;
}
.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  transition-property: transform, opacity;
}
.campaign {
  background: #f1f1f1;
  padding: 30px 0;
}
.campaign img {
  max-width: 100%;
}
.text-center {
  margin-bottom: 35px;
}
#portfolio-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}
#portfolio-list li {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 50%;
  margin-left: -1px;
  margin-bottom: -4px;
  padding: 0;
  text-align: center;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
#portfolio-list li h3 {
  background: #fff;
  bottom: 0;
  font-size: 1.4em;
  font-weight: 300;
  left: 0;
  letter-spacing: 1px;
  margin: 0;
  padding: 20px;
  position: absolute;
  text-align: right;
  text-transform: none;
  width: 100%;
  transition: transform 0.2s ease 0s, color 0.2s ease 0s;
  -webkit-transition: transform 0.2s ease 0s, color 0.2s ease 0s;
  -moz-transition: transform 0.2s ease 0s, color 0.2s ease 0s;
  -o-transition: transform 0.2s ease 0s, color 0.2s ease 0s;
  -ms-transition: transform 0.2s ease 0s, color 0.2s ease 0s;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="content">
  <div class="container">
    <div class="page-content">
      <div class="row latest-posts-classic">
        <div class="col-md-12">
          <form method="GET" action="http://puskopditbkcukalimantan.org/cari" accept-charset="UTF-8">

            <div class="input-group">
              <input class="form-control" placeholder="Masukkan kata kunci" name="q" type="text">
              <span class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
</span>
            </div>
          </form>
        </div>
        <div class="hr1 margin-top"></div>
        <div class="hr1 margin-top"></div>

        <div class="col-md-4 post-row portfolio-item">
          <div class="portfolio-thumb">
            <a class="lightbox" title="Happy 27th Anniversary Puskopdit BKCU Kalimantan" href="http://puskopditbkcukalimantan.org/images_artikel/EWO0TuVXsK2016-01-01.jpg">
              <div class="thumb-overlay"><i class="fa fa-arrows-alt"></i>
              </div>
              <img src="http://puskopditbkcukalimantan.org/images_artikel/EWO0TuVXsK2016-01-01n.jpg" class="img-responsive " alt="Happy 27th Anniversary Puskopdit BKCU Kalimantan">
            </a>
          </div>
          <hr/>
          <div class="left-meta-post">
            <div class="post-date"><span class="day">27</span><span class="month">Nov</span>
            </div>
            <div class="post-type"><i class="fa fa-picture-o"></i>
            </div>
          </div>
          <h3 class="post-title"><a href="http://puskopditbkcukalimantan.org/artikel_detail/44">Happy 27th Anniversary Puskopdit BKCU Kalimantan</a></h3>
          <div class="post-content">
            <p>
              <a href="http://puskopditbkcukalimantan.org/artikel_detail/44" style="color:#666;">
Selamat Ulang Tahun ke 27 Puskopdit BKCU Kalimantan
</a>
            </p>
          </div>
        </div>

        <div class="col-md-4 post-row portfolio-item">
          <div class="portfolio-thumb">
            <a class="lightbox" title="Inilah Roadmap Credit Union Kalimantan" href="http://puskopditbkcukalimantan.org/images_artikel/32APzrnupX2016-01-01.jpg">
              <div class="thumb-overlay"><i class="fa fa-arrows-alt"></i>
              </div>
              <img src="http://puskopditbkcukalimantan.org/images_artikel/32APzrnupX2016-01-01n.jpg" class="img-responsive " alt="Inilah Roadmap Credit Union Kalimantan">
            </a>
          </div>
          <hr/>
          <div class="left-meta-post">
            <div class="post-date"><span class="day">22</span><span class="month">Okt</span>
            </div>
            <div class="post-type"><i class="fa fa-picture-o"></i>
            </div>
          </div>
          <h3 class="post-title"><a href="http://puskopditbkcukalimantan.org/artikel_detail/43">Inilah Roadmap Credit Union Kalimantan</a></h3>
          <div class="post-content">
            <p>
              <a href="http://puskopditbkcukalimantan.org/artikel_detail/43" style="color:#666;">
Sebanyak 44 credit union di bawah kordinasi Pusat Koperasi Kredit BKCU Kalimantan bertekad menja...
</a>
            </p>
          </div>
        </div>






        <div class="col-md-4 post-row portfolio-item">
          <div class="portfolio-thumb">
            <a class="lightbox" title="Persiapan Pensiun Sejak Dini" href="http://puskopditbkcukalimantan.org/images/image-article.jpg">
              <div class="thumb-overlay"><i class="fa fa-arrows-alt"></i>
              </div>
              <img src="http://puskopditbkcukalimantan.org/images/image-articlen.jpg" class="img-responsive" alt="Persiapan Pensiun Sejak Dini">
            </a>
          </div>
          <hr/>
          <div class="left-meta-post">
            <div class="post-date"><span class="day">14</span><span class="month">Okt</span>
            </div>
            <div class="post-type"><i class="fa fa-picture-o"></i>
            </div>
          </div>
          <h3 class="post-title"><a href="http://puskopditbkcukalimantan.org/artikel_detail/42">Persiapan Pensiun Sejak Dini</a></h3>
          <div class="post-content">
            <p>
              <a href="http://puskopditbkcukalimantan.org/artikel_detail/42" style="color:#666;">
Uang bukanlah segala-galanya, tapi segala-galanya perlu uang. Kalimat ini bukanlah hal baru bagi kit...
</a>
            </p>
          </div>
        </div>
        <div class="col-md-4 post-row portfolio-item">
          <div class="portfolio-thumb">
            <a class="lightbox" title="Pemberdayaan dalam Komunitas" href="http://puskopditbkcukalimantan.org/images_artikel/gRpM7OFOKG2016-01-01.jpg">
              <div class="thumb-overlay"><i class="fa fa-arrows-alt"></i>
              </div>
              <img src="http://puskopditbkcukalimantan.org/images_artikel/gRpM7OFOKG2016-01-01n.jpg" class="img-responsive " alt="Pemberdayaan dalam Komunitas">
            </a>
          </div>
          <hr/>
          <div class="left-meta-post">
            <div class="post-date"><span class="day">14</span><span class="month">Okt</span>
            </div>
            <div class="post-type"><i class="fa fa-picture-o"></i>
            </div>
          </div>
          <h3 class="post-title"><a href="http://puskopditbkcukalimantan.org/artikel_detail/41">Pemberdayaan dalam Komunitas</a></h3>
          <div class="post-content">
            <p>
              <a href="http://puskopditbkcukalimantan.org/artikel_detail/41" style="color:#666;">
Sejarah Credit Union senyatanya bertumbuh dalam komunitas, dimana anggota saling kenal, percaya, dan...
</a>
            </p>
          </div>
        </div>
        <div class="col-md-4 post-row portfolio-item">
          <div class="portfolio-thumb">
            <a class="lightbox" title="Penguatan Ekonomi Mikro" href="http://puskopditbkcukalimantan.org/images_artikel/RdjIDY5XSA2016-01-01.jpg">
              <div class="thumb-overlay"><i class="fa fa-arrows-alt"></i>
              </div>
              <img src="http://puskopditbkcukalimantan.org/images_artikel/RdjIDY5XSA2016-01-01n.jpg" class="img-responsive " alt="Penguatan Ekonomi Mikro">
            </a>
          </div>
          <hr/>
          <div class="left-meta-post">
            <div class="post-date"><span class="day">14</span><span class="month">Okt</span>
            </div>
            <div class="post-type"><i class="fa fa-picture-o"></i>
            </div>
          </div>
          <h3 class="post-title"><a href="http://puskopditbkcukalimantan.org/artikel_detail/40">Penguatan Ekonomi Mikro</a></h3>
          <div class="post-content">
            <p>
              <a href="http://puskopditbkcukalimantan.org/artikel_detail/40" style="color:#666;">
Sak niki kulo sampun lego, sampun uwal saking abang-abang. Mantun nderek niki , Mpun pokoe entheng l...
</a>
            </p>
          </div>
        </div>
        <div class="col-md-4 post-row portfolio-item">
          <div class="portfolio-thumb">
            <a class="lightbox" title="Menurunkan Persentase Kelalaian, Pasti bisa." href="http://puskopditbkcukalimantan.org/images_artikel/RMKVgScXZX2016-01-01.jpg">
              <div class="thumb-overlay"><i class="fa fa-arrows-alt"></i>
              </div>
              <img src="http://puskopditbkcukalimantan.org/images_artikel/RMKVgScXZX2016-01-01n.jpg" class="img-responsive " alt="Menurunkan Persentase Kelalaian, Pasti bisa.">
            </a>
          </div>
          <hr/>
          <div class="left-meta-post">
            <div class="post-date"><span class="day">14</span><span class="month">Okt</span>
            </div>
            <div class="post-type"><i class="fa fa-picture-o"></i>
            </div>
          </div>
          <h3 class="post-title"><a href="http://puskopditbkcukalimantan.org/artikel_detail/39">Menurunkan Persentase Kelalaian, Pasti bisa.</a></h3>
          <div class="post-content">
            <p>
              <a href="http://puskopditbkcukalimantan.org/artikel_detail/39" style="color:#666;">
Kredit Lalai sering kita jumpai dan kita dengar di kehidupan sehari-hari, baik dalam skala yang keci...
</a>
            </p>
          </div>
        </div>
        <div class="col-md-4 post-row portfolio-item">
          <div class="portfolio-thumb">
            <a class="lightbox" title="Happy International Credit Union Day" href="http://puskopditbkcukalimantan.org/images_artikel/OL9hAD1m6S2016-01-01.jpg">
              <div class="thumb-overlay"><i class="fa fa-arrows-alt"></i>
              </div>
              <img src="http://puskopditbkcukalimantan.org/images_artikel/OL9hAD1m6S2016-01-01n.jpg" class="img-responsive " alt="Happy International Credit Union Day">
            </a>
          </div>
          <hr/>
          <div class="left-meta-post">
            <div class="post-date"><span class="day">13</span><span class="month">Okt</span>
            </div>
            <div class="post-type"><i class="fa fa-picture-o"></i>
            </div>
          </div>
          <h3 class="post-title"><a href="http://puskopditbkcukalimantan.org/artikel_detail/38">Happy International Credit Union Day</a></h3>
          <div class="post-content">
            <p>
              <a href="http://puskopditbkcukalimantan.org/artikel_detail/38" style="color:#666;">
Pengurus , Pengawas Dan Manajemen Puskopdit BKCU Kalimantan Mengucapkan Selamat Hari Credit Union In...
</a>
            </p>
          </div>
        </div>
        <div class="col-md-4 post-row portfolio-item">
          <div class="portfolio-thumb">
            <a class="lightbox" title="STRATEGI UNTUK PENGEMBANGAN ORGANISASI (ORGANIZATIONA DEVELOPMENT / OD)" href="http://puskopditbkcukalimantan.org/images/image-article.jpg">
              <div class="thumb-overlay"><i class="fa fa-arrows-alt"></i>
              </div>
              <img src="http://puskopditbkcukalimantan.org/images/image-articlen.jpg" class="img-responsive" alt="STRATEGI UNTUK PENGEMBANGAN ORGANISASI (ORGANIZATIONA DEVELOPMENT / OD)">
            </a>
          </div>
          <hr/>
          <div class="left-meta-post">
            <div class="post-date"><span class="day">16</span><span class="month">Apr</span>
            </div>
            <div class="post-type"><i class="fa fa-picture-o"></i>
            </div>
          </div>
          <h3 class="post-title"><a href="http://puskopditbkcukalimantan.org/artikel_detail/35">STRATEGI UNTUK PENGEMBANGAN ORGANISASI (ORGANIZATIONA DEVELOPMENT / OD)</a></h3>
          <div class="post-content">
            <p>
              <a href="http://puskopditbkcukalimantan.org/artikel_detail/35" style="color:#666;">
Strategi untuk pengembangan organisasi (Organizational Development/ OD) mengenai perencanaan dan pen...
</a>
            </p>
          </div>
        </div>
        <div class="col-md-4 post-row portfolio-item">
          <div class="portfolio-thumb">
            <a class="lightbox" title="20 Tahun Bintang Laut Menerangi Warga Siantan" href="http://puskopditbkcukalimantan.org/images_artikel/zyHRypJWxt2016-01-01.jpg">
              <div class="thumb-overlay"><i class="fa fa-arrows-alt"></i>
              </div>
              <img src="http://puskopditbkcukalimantan.org/images_artikel/zyHRypJWxt2016-01-01n.jpg" class="img-responsive " alt="20 Tahun Bintang Laut Menerangi Warga Siantan">
            </a>
          </div>
          <hr/>
          <div class="left-meta-post">
            <div class="post-date"><span class="day">25</span><span class="month">Feb</span>
            </div>
            <div class="post-type"><i class="fa fa-picture-o"></i>
            </div>
          </div>
          <h3 class="post-title"><a href="http://puskopditbkcukalimantan.org/artikel_detail/34">20 Tahun Bintang Laut Menerangi Warga Siantan</a></h3>
          <div class="post-content">
            <p>
              <a href="http://puskopditbkcukalimantan.org/artikel_detail/34" style="color:#666;">
Suatu sore datang seorang ibu ke pastoran Stella Maris. Ia bercerita kepada Pastor Paskalis Soedirdj...
</a>
            </p>
          </div>
        </div>
        <div class="col-md-4 post-row portfolio-item">
          <div class="portfolio-thumb">
            <a class="lightbox" title="DEVELOPMENT EDUCATORS : Integrasi Dari Tujuan Pembangunan Sosial dan Jaringan Credit Union" href="http://puskopditbkcukalimantan.org/images_artikel/Cd0shapwXj2016-01-01.jpg">
              <div class="thumb-overlay"><i class="fa fa-arrows-alt"></i>
              </div>
              <img src="http://puskopditbkcukalimantan.org/images_artikel/Cd0shapwXj2016-01-01n.jpg" class="img-responsive " alt="DEVELOPMENT EDUCATORS : Integrasi Dari Tujuan Pembangunan Sosial dan Jaringan Credit Union">
            </a>
          </div>
          <hr/>
          <div class="left-meta-post">
            <div class="post-date"><span class="day">6</span><span class="month">Feb</span>
            </div>
            <div class="post-type"><i class="fa fa-picture-o"></i>
            </div>
          </div>
          <h3 class="post-title"><a href="http://puskopditbkcukalimantan.org/artikel_detail/33">DEVELOPMENT EDUCATORS : Integrasi Dari Tujuan Pembangunan Sosial dan Jaringan Credit Union</a></h3>
          <div class="post-content">
            <p>
              <a href="http://puskopditbkcukalimantan.org/artikel_detail/33" style="color:#666;">
Oleh : Serapina Serapin dan Erowin
Mengutip perkataan Diana Ross yang berkata,
Perjalanank...
</a>
            </p>
          </div>
        </div>
        <div class="col-md-4 post-row portfolio-item">
          <div class="portfolio-thumb">
            <a class="lightbox" title="Character Building" href="http://puskopditbkcukalimantan.org/images_artikel/hc2Sq1x6Y02016-01-01.jpg">
              <div class="thumb-overlay"><i class="fa fa-arrows-alt"></i>
              </div>
              <img src="http://puskopditbkcukalimantan.org/images_artikel/hc2Sq1x6Y02016-01-01n.jpg" class="img-responsive " alt="Character Building">
            </a>
          </div>
          <hr/>
          <div class="left-meta-post">
            <div class="post-date"><span class="day">28</span><span class="month">Jan</span>
            </div>
            <div class="post-type"><i class="fa fa-picture-o"></i>
            </div>
          </div>
          <h3 class="post-title"><a href="http://puskopditbkcukalimantan.org/artikel_detail/32">Character Building</a></h3>
          <div class="post-content">
            <p>
              <a href="http://puskopditbkcukalimantan.org/artikel_detail/32" style="color:#666;">
CHARACTER BUILDING
Mengapa Pelatihan Character Building itu penting? - Perjalanan dan pengalaman...
</a>
            </p>
          </div>
        </div>
        <div class="col-md-4 post-row portfolio-item">
          <div class="portfolio-thumb">
            <a class="lightbox" title="BKCU Kalimantan mengadakan Lokakarya Community Development" href="http://puskopditbkcukalimantan.org/images_artikel/y1N6JRsvEb2016-01-01.jpg">
              <div class="thumb-overlay"><i class="fa fa-arrows-alt"></i>
              </div>
              <img src="http://puskopditbkcukalimantan.org/images_artikel/y1N6JRsvEb2016-01-01n.jpg" class="img-responsive " alt="BKCU Kalimantan mengadakan Lokakarya Community Development">
            </a>
          </div>
          <hr/>
          <div class="left-meta-post">
            <div class="post-date"><span class="day">17</span><span class="month">Jan</span>
            </div>
            <div class="post-type"><i class="fa fa-picture-o"></i>
            </div>
          </div>
          <h3 class="post-title"><a href="http://puskopditbkcukalimantan.org/artikel_detail/31">BKCU Kalimantan mengadakan Lokakarya Community Development</a></h3>
          <div class="post-content">
            <p>
              <a href="http://puskopditbkcukalimantan.org/artikel_detail/31" style="color:#666;">
Apakah Credit Union anda sudah menjadi Credit Union Sejati?
Pertanyaan yang cukup menyentil...
</a>
            </p>
          </div>
        </div>
        <div class="col-md-12 pagination-wrapper">
          <ul class="pagination">
            <li class="disabled"><span>&laquo;</span>
            </li>
            <li class="active"><span>1</span>
            </li>
            <li><a href="http://puskopditbkcukalimantan.org/artikel/0?page=2">2</a>
            </li>
            <li><a href="http://puskopditbkcukalimantan.org/artikel/0?page=3">3</a>
            </li>
            <li><a href="http://puskopditbkcukalimantan.org/artikel/0?page=2" rel="next">&raquo;</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>