导航菜单中的内容被推到左侧
Posted
技术标签:
【中文标题】导航菜单中的内容被推到左侧【英文标题】:Content in nav menu is pushed to the left 【发布时间】:2019-11-30 16:36:45 【问题描述】:我正在尝试使用 Laravel 构建我的第一个项目,使用 Blade 和 Bootstrap 作为 html/CSS 框架。
我在找出导致烦人错误的原因时遇到了一些困难。我有几个页面包含导航菜单。只有在索引页面上,导航菜单的内容才会被按下到左侧。
我发现了导致此问题的代码部分,但我不知道我做错了什么。
会发生这种情况: 在索引页面上,导航栏的全部内容向左按下了几个像素。
索引页面的完整代码为:
@extends('layouts.app')
@section('content')
<h1>New Blog Posts</h1>
@if(count($posts) > 0)
@foreach($posts as $post)
<!-- bouw een entry -->
<div class="card mb-2">
<div class="card-body">
<div class="row">
<div class="col-md-4 text-center">
<img class="img-fluid px-2 py-2" style="max-height:250px;" src="/storage/cover_images/ $post->cover_image ">
</div>
<div class="col-md-8 p-1">
<h3><a href="/posts/ $post->id "> $post->title </a></h3>
!! substr($post->body, 0, 500).'... ' !!<a href="/posts/ $post->id ">Read on</a>
<small>Written on $post->created_at by $post->user->name </small>
</div>
</div>
</div>
</div>
@endforeach
<div class="row d-flex justify-content-center">
$posts->links()
</div>
@else
<p>No posts found.</p>
@endif
@endsection
导致问题的两行是:
<img class="img-fluid px-2 py-2" style="max-height:250px;" src="/storage/cover_images/ $post->cover_image ">
和
!! substr($post->body, 0, 500).'... ' !!<a href="/posts/ $post->id ">Read on</a>
【问题讨论】:
如果$posts
为空,您还会遇到问题吗?请您也添加layouts.app
的代码。
感谢您的回复。我设法解决了这个问题并发布了解决方案。我想我昨天在屏幕后面坐得太久了。
【参考方案1】:
你试过这样吗?
<a href=" url('/posts/' . $post->id) ">Read on</a>
你的图片喜欢这样吗?
<img src=" asset('storage/cover_images/' . $post->cover_image) " />
请您提供错误信息吗?
【讨论】:
【参考方案2】:我猜越来越多的人在学习过程中遇到过这种情况。不管是不是因为坐在电脑后面太久。
我忽略了页面长度。索引页面的长度大于屏幕高度(这不适用于其他页面),导致出现滚动条。
将滚动条添加到我的 CSS 中的 body 标记以强制在每个页面上使用它解决了这个问题。
body
overflow-y:scroll;
【讨论】:
以上是关于导航菜单中的内容被推到左侧的主要内容,如果未能解决你的问题,请参考以下文章