Question

结果显示如下 http://puu.sh/hZrVY/cbfe561492.jpg

如何制作它以便它们以3行显示而没有偏移。

代码：

        @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>
                <a href="/stories/{{ $post->slug }}#disqus_thread">{{ str_limit($post->title, 34) }}</a>
            </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

缺少行标记：

@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>
            <a href="/stories/{{ $post->slug }}#disqus_thread">{{ str_limit($post->title, 34) }}</a>
        </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

查询结果有时无法正确显示

1 个答案: