Question

我的Laravel应用出现问题。当我的道路只有一层深时，一切看起来都很好。如果路径深达两层，则我的padding-top消失了。

这些都是同一页，只是路线不同：

Route::get('/edit', 'HomeController@edit')->name('edit');
Route::get('/profile/edit', 'HomeController@edit');

public function edit()
    {
        $user = Auth::user();
        
        $tab = 'profile';
        
        return view('home.editprofile', compact('user', 'tab'));
    }

我的CSS包括padding-top：60像素，因此固定的导航栏不会覆盖我的MAIN元素。我通过将填充物放在身体上来完成同样的事情。

这正成为一个问题，因为/ password / reset已经在顶部被切断，随着应用的增长，我认为这将是一个巨大的问题，我需要显示/ users / 266或其他内容。

我已经构建了另一个完整的Laravel应用程序，它没有这个问题。

app.blade.php

<!doctype html>
<html lang="en">
    @include('layouts.head')
  <body>
    <div id="app">
        @include('layouts.nav')

        <main>
            @yield('content')
        </main>
    </div>
    @include('layouts.footer')
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip(); 
        });
    </script>
    <script>
        $('#waiverModal').on('shown.bs.modal', function () {
            $('#myInput').trigger('focus')
        })
    </script>
  </body>
</html>

head.blade.php

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- Icon -->
    <link rel="shortcut icon" href="images/favicon.ico">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/custom.css">

    <title>@yield('title', 'NMSC')</title>
</head>

nav.blade.php

<nav class="navbar navbar-expand-md navbar-light bg-white navbar-laravel fixed-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="{{ url('/') }}">
            <img src="/images/logo.png" width="150" height="59" alt="NMSC Logo">        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <!-- Left Side Of Navbar -->
            <ul class="navbar-nav mr-auto">

            </ul>

            <!-- Right Side Of Navbar -->
            <ul class="navbar-nav ml-auto">
                <!-- Authentication Links -->
                @guest
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                    </li>
                    @if (Route::has('register'))
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                        </li>
                    @endif
                @else
                    <li class="nav-item dropdown">
                        <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            {{ Auth::user()->name }} <span class="caret"></span>
                        </a>

                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="{{ route('home') }}">My Dashboard</a>
                            <a class="dropdown-item" href="{{ route('logout') }}"
                               onclick="event.preventDefault();
                                             document.getElementById('logout-form').submit();">
                                {{ __('Log Out') }}
                            </a>

                            <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                @csrf
                            </form>
                        </div>
                    </li>
                @endguest
                <li class="nav-item">
                    <a href="#" class="nav-link" title="Find us on Facebook"><i class="fab fa-facebook-square fa-lg"></i></a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" title="Follow us on Twitter"><i class="fab fa-twitter-square fa-lg"></i></a>
                </li>
            </ul>
        </div>
    </div>
</nav>

editprofile.blade.php

@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-3">
            @include('layouts.usernav')
        </div>
        <div class="col-6">
                <div class="card">
                    <div class="card-header">Profile - {{ Auth::user()->name }}</div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="card border-0 mb-3">
                                    <img class="card-img-top"
                                        @if (strpos($user->photo, 'https://') !==false)
                                            src="{{ $client->logo }}" 
                                            alt="User Photo"
                                        @elseif ($user->photo)
                                            src="/storage/user_images/{{ $user->photo }}" 
                                            alt="User Photo"
                                        @else
                                            src="/images/no-photo.png" 
                                            alt="No Photo"
                                        @endif
                                    >
                                </div>
                            </div>
                            <div class="col-lg-9">
                                <form>
                                    <div class="form-group">
                                        <label for="name">Name</label>
                                        @if (old('name'))
                                            <input type="text" name="name" id="name" class="form-control" autocomplete="off" value="{{ old('name') }}">
                                        @else
                                            <input type="text" name="name" id="name" class="form-control" autocomplete="off" value="{{ $user->name }}">
                                        @endif
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">Password</label>
                                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                                    </div>
                                    <div class="form-group form-check">
                                        <input type="checkbox" class="form-check-input" id="exampleCheck1">
                                        <label class="form-check-label" for="exampleCheck1">Check me out</label>
                                    </div>
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </div>
</div>
@endsection

您可以看到/ login和/ password / reset之间的区别，这是我未构建的两个视图：

帮助？

Answer 1

<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="css/custom.css">

这些URL是相对的，因此，如果您位于/edit/foo中，它们将尝试转到/edit/css/custom.css，该URL不存在。

您需要使这些为绝对值：

<link rel="shortcut icon" href="/images/favicon.ico">
<link rel="stylesheet" href="/css/custom.css">

或更妙的是，通过url或asset助手运行它们：

<link rel="shortcut icon" href="{{ asset('images/favicon.ico') }}">
<link rel="stylesheet" href="{{ asset('css/custom.css') }}">

Laravel路径导致填充问题

1 个答案: