Query results not properly displaying sometimes - twitter-bootstrap-3

Question

Results show up like this
http://puu.sh/hZrVY/cbfe561492.jpg
How can I make it so that they show up in rows of 3 with no offsetting.
Code:
#foreach ($posts as $post)
<div class="col-md-4 portfolio-item">
<a href="/stories/{{ $post->slug }}#disqus_thread">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
{{ str_limit($post->title, 34) }}
</h3>
<p>{{ str_limit($post->content) }}</p>
<em>({{ $post->published_at->format('M jS Y g:ia') }})</em>
</div>
#endforeach
CSS:
body {
background-image: url("http://www.ruschgaming.tv/img/bg.png");
background-attachment: fixed;
background-repeat: no-repeat;
}
.portfolio-item {
margin-bottom: 25px;
}
.container {
margin-top: 80px;
padding-top: 20px;
height: 100%;
background-color: #ffffff;
border-radius: 12px;
box-shadow: 2px 2px 5px grey;
}

Answer 1

Missing the rows tags:
#foreach ($posts as $key => $post)
#if(($key==0) || is_int($key/3))
<div class="row">
#endif
<div class="col-md-4 portfolio-item">
<a href="/stories/{{ $post->slug }}#disqus_thread">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
{{ str_limit($post->title, 34) }}
</h3>
<p>{{ str_limit($post->content) }}</p>
<em>({{ $post->published_at->format('M jS Y g:ia') }})</em>
</div>
#if(is_int($key/3))
<div>
#endif
#endforeach