如果只有一篇文章，按钮宽度为 100%

Question

如果博客中只有一篇文章，我正在尝试创建一个按钮，它在刀片中的宽度为 100%。

我解释得更好。我正在写博客。当打开帖子时，我可以看到我的帖子和两个按钮（上一个和下一个），如果我在最后一个帖子中，我希望上一个按钮有 100% 并且我在第一个帖子中相同。但如果我在第二篇文章中，我需要以 50% 的比例显示 prev 和 next。

在我的控制器中我有这个：

public function show($url)
    {
        $post = Blog::where('url', '=', $url)->first();

        $next = Blog::where('id', '>', $post->id)->min('id');
        $previous = Blog::where('id', '<', $post->id)->max('id');

        $nextPost = Blog::where('id', '=', $next)->first();
        $previousPost = Blog::where('id', '=', $previous)->first();

        //$popularPost = Blog::where('visualization', '>=', 5)->get();
        $categories = BlogCategory::all();

        //insert time when show post
        $this->visualizationRepository->countVisualization($post->id, 'Model\Blog', $_SERVER['REMOTE_ADDR']);

        return view('web.singleBlog')
            ->with('post', $post)
            ->with('popular', [])
            ->with('next', $nextPost)
            ->with('previous', $previousPost)
            ->with('categories', $categories);
    }

在我看来，我有这个：

<div class="post-nav-wrap fl-wrap">
      @if($previous != null)
        <a class="post-nav post-nav-prev" href="{{ url('blog/'.$previous->name)}}"><span class="post-nav-img"><img src="{{$previous->media[0]->url}}" alt=""></span><span class="post-nav-text"><strong></strong>{{trans('web.single_blog_previous_post')}}<br>{{$previous->name}}</span></a> 
      @endif
      @if($next != null)
        <a class="post-nav post-nav-next" href="{{ url('blog/'.$next->name)}}"><span class="post-nav-img"><img src="{{$next->media[0]->url}}" alt=""></span><span class="post-nav-text"><strong>{{trans('web.single_blog_next_post')}}</strong><br>{{$next->name}}</span></a>
         
       @endif
</div>

我怎么能做到这一点？ next 和 previous 返回了一个对象，如果检查它是否为 >=1，我无法做到这一点

更新

@if( $previous != null ) 
   @if( $next != null ) 
     <a class="post-nav post-nav-prev half" style="width: 100%;" href="{{ url('blog/'.$previous->name)}}"><span class="post-nav-img"><img src="{{$previous->media[0]->url}}" alt=""></span><span class="post-nav-text"><strong></strong>{{trans('web.single_blog_previous_post')}}<br>{{$previous->name}}</span></a> 
     <a class="post-nav post-nav-next half" style="width: 100%;" href="{{ url('blog/'.$next->name)}}"><span class="post-nav-img"><img src="{{$next->media[0]->url}}" alt=""></span><span class="post-nav-text"><strong>{{trans('web.single_blog_next_post')}}</strong><br>{{$next->name}}</span></a>
     @else
       <a class="post-nav post-nav-prev fullwidth " style="width: 100%;" href="{{ url('blog/'.$previous->name)}}"><span class="post-nav-img"><img src="{{$previous->media[0]->url}}" alt=""></span><span class="post-nav-text"><strong></strong>{{trans('web.single_blog_previous_post')}}<br>{{$previous->name}}</span></a> 
        @endif
     @else
      <a class="post-nav post-nav-next fullwidth" style="width: 100%;" href="{{ url('blog/'.$next->name)}}"><span class="post-nav-img"><img src="{{$next->media[0]->url}}" alt=""></span><span class="post-nav-text"><strong>{{trans('web.single_blog_next_post')}}</strong><br>{{$next->name}}</span></a>
@endif

更新 2

<div class="post-nav-wrap fl-wrap">
     @if($previous != null)
     <a class="{{ $next !=  null ? 'half post-nav post-nav-prev' : 'full post-nav post-nav-prev' }}" href="{{ url('blog/'.$previous->name)}}"><span class="post-nav-img"><img src="{{$previous->media[0]->url}}" alt=""></span><span class="post-nav-text"><strong></strong>{{trans('web.single_blog_previous_post')}}<br>{{$previous->name}}</span></a> 
      @endif
      @if($next != null)
        <a class="{{ $next !=  null ? 'half post-nav post-nav-next' : 'full post-nav post-nav-next' }}" href="{{ url('blog/'.$next->name)}}"><span class="post-nav-img"><img src="{{$next->media[0]->url}}" alt=""></span><span class="post-nav-text"><strong>{{trans('web.single_blog_next_post')}}</strong><br>{{$next->name}}</span></a>
       @endif
 </div>

Answer 1

假设如果$next 和$previous 都是object，如果它们为null 则表示当前post 是最后一篇 |首先。

此时，如果您不使用 css 库，请创建一个类：

.half { width: 50%; }
.fullwidth { width: 100%; }

那么你需要控制当前帖子是第一篇还是最后一篇：

@if( $previous != null ) 
    @if( $next != null ) 
        <!-- HERE YOUR PREVIOUS BTN WITH HALF CLASS -->
        <!-- HERE YOUR NEXT BTN WITH HALF CLASS -->
    @else
        <!-- HERE YOUR PREVIOUS BTN WITH FULL CLASS -->
    @endif
@else
    <!-- HERE YOUR NEXT BTN WITH FULL CLASS -->
@endif

希望这可以解决您的问题。