Question

当我发布新闻时，我在帖子之间留下了这个空白，我不知道是谁造成这个。这段代码中是否缺少某些内容？这也发生在每个类别页面中

这是我的代码：

        <div class="col-xs-12 col-sm-9">

      @if(count($latest))
      <div class="col-md-12">
      <a href="/post/{{$latest->slug}}/{{$latest->id}}">
        <img class="img-responsive" src="{!! url($latest->image) !!}" alt="" style="padding: 0px; height: 400px; width: 720px"></a>
        <h2 style="margin-top: 0; color: #666;">

          @foreach($latest->category as $cat)
            <a style="color: red; text-transform: uppercase; font-size: 13px; text-decoration: none" href="/categories/{{$cat->name}}">{{$cat->name}}</a>
          @endforeach

        <br><a class="post" href="/post/{{$latest->slug}}/{{$latest->id}}">{!! strip_tags(link_to_action('PostsController@show', $latest->title, [$latest->slug, $latest->id])) !!}</a></h2>
        <span style="color: #b8b8b8">Paskeblta {{$latest->created_at}}</span>
        <hr>
      </div>
      @else
       <p>Nėra naujienų</p>
      @endif



      <div class="row">
            @foreach($posts as $post)
            @unless ($post->id == $latest->id)
        <div class="col-xs-6 col-lg-6">
        <a href="/post/{{$post->slug}}/{{$post->id}}">
        <img class="img-responsive" style="width: 352px; height: 180px" src="{!! url($post->image) !!}" alt=""></a>
          <h3 class="post" style="font-size: 1.4em;">

          @foreach($post->category as $cat)
          <a style="color: red; text-transform: uppercase; font-size: 11px; text-decoration: none" href="/categories/{{$cat->name}}">{{$cat->name}}</a>
          @endforeach

          <br><a class="post" href="/post/{{$post->slug}}/{{$post->id}}">{{strip_tags($post->title)}}</a></h3>
          <span style="color: #b8b8b8">Paskelbta {{$post->created_at}}</span>
          <br><br>
        </div><!--/.col-xs-6.col-lg-4-->
        @endunless
        @endforeach
      </div><!--/row-->
       {!! $posts->render() !!}
    </div><!--/.col-xs-12.col-sm-9-->

Answer 1

它发生的原因是第二个div（行）内的子div是具有动态高度的浮动元素。如果你注意到，第一篇文章的摘录长度比其他文章长，这就是为什么它的高度也比其他文章更高。

您可以通过在css下面应用来解决您的问题。你需要为此添加一个额外的类名 -

  <div class="row recent-posts">
        @foreach($posts as $post)
       ....
       ....
    @endunless
    @endforeach
  </div><!--/row-->


.row.recent-posts div:nth-child(2n+1){
    clear:both;
}

OR

您也可以使用固定的

来避免此问题

<div class="col-xs-6 col-lg-6">

.col-xs-6, .col-lg-6{
     height:400px;
}

Answer 2

可能第3个帖子比你的竞争对手高出50％。

<img class="img-responsive" style="width: 352px; height: 180px" src="{!! url($post->image) !!}" alt=""></a>

尝试从样式中删除宽度。

Bootstrap列。空格处

2 个答案: