所以我看到bootstrap对网格有一些奇怪的问题,我不知道这是bootstrap bug还是我做错了什么,请看看这个
因此这些网格之间存在一些奇怪的差距,这里首先是我的设置/代码我认为这是因为不同尺寸的图像使每个列的高度不同,但是现在嘿它具有相同的图像相同的图像尺寸,仍然在这里显示问题....
<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(请注意,它可能没有完全相同的项目,因为截图是从我的本地网站获取但问题仍然存在)
答案 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>«</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">»</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>