Путь Laravel, вызывающий проблемы с заполнением
Возникла проблема с моим приложением 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: 60px, поэтому фиксированная панель навигации не закрывает мой ГЛАВНЫЙ элемент. Я сделал то же самое, поместив отступ в BODY.
Это становится проблемой, потому что /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>редактировать профиль.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, двумя представлениями, которые я не создавал:
Помощь?
Какой код ты хочешь увидеть, @TimLewis? Все выложу, если поможет.
Буквально любой код .blade.php, который имеет отношение к этой проблеме. Есть ли в home.editprofile код, зависящий от текущего маршрута, по которому вы движетесь?
В home.editprofile нет ничего, что зависело бы от маршрута.
Хорошее обновление; определенно помогает. Не хватает только layouts.usernav, но вы правы. Примером того, что может повлиять на макет, является Route::has("register"), так что, может быть, в layouts.usernav есть что-то подобное?
Я мог бы также опубликовать layouts.usernav (боковая навигационная панель), но мое последнее редактирование показывает, что это происходит с логином и паролем/сбросом, ни один из которых не имеет этой навигационной панели.
Ага; Я был на ложном пути. Я думал, что необязательный элемент вызывает некоторые проблемы с полями/отступами/и т. д. (которые у меня случались раньше), но ответ ниже является вероятным виновником. Если вы проверите инструменты своего браузера (F12), вы, вероятно, увидите ошибку 404 в некоторых загруженных сценариях на страницах с глубиной 2, но не на страницах с глубиной 1. Вероятно, проблема с путями во включенных файлах css.
Ответы 1
<link rel = "shortcut icon" href = "images/favicon.ico">
<link rel = "stylesheet" href = "css/custom.css">
Эти URL-адреса являются относительными, поэтому, если вы находитесь в /edit/foo, они попытаются перейти к /edit/css/custom.css, которого не существует.
Вам нужно сделать их абсолютными:
<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') }}">
Это именно то, что я сделал в другом приложении: <link href = "{{ assets('css/custom.css') }}" rel = "stylesheet">
Думаю, если бы я потрудился проверить его в ChromDev, я бы увидел, что мой css не загружается, и это указало бы мне правильное направление. СМХ
Создает ли ваш путь какой-то элемент HTML, например, хлебную крошку? Хотя я ожидаю, что 2 уровня будут в порядке, а 1 - с проблемой, но вы описали это как обратное... При этом, не видя вашего кода макета, мы не сможем отладить это. .