个人中心
gpt4 book ai didi

css - Laravel 路径导致填充问题

转载 作者：太空宇宙 更新时间：2023-11-03 21:04:11 26 4
gpt4 key购买 nike

我的 Laravel 应用程序遇到问题。当我的路径只有一层深度时，一切看起来都很好。如果路径有两层深，我的 padding-top 就会消失。

/edit displays just fine

/profile/edit is messed up

这两个都是同一个页面，只是路径不同:

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，所以固定的导航栏不会覆盖我的 MAIN 元素。我通过将填充放在 BODY 中来完成同样的事情。

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

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

应用程序.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>

头.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>

导航 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 之间的区别，这两个 View 我没有构建:

login.blade.php

reset.blade.php

帮忙吗？

最佳答案 

<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') }}">

关于css - Laravel 路径导致填充问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55619129/

26 4 0
文章推荐： c# - 我应该如何从位创建字节？
文章推荐： python - 使用 pywinauto 从 wxWindow 控件获取文本
文章推荐： Python Selenium send_keys ~ 如何发送高级 Unicode 字符
文章推荐： python - 通过在文本 block 中查找关键字来过滤数据框
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com