laravel的对齐未正确地由一个刀片文件中的多个嵌入式css和外部css引起 [英] The align of the laravel not properly cause by multiple embedded css and external css in one blade file

查看：36
本文介绍了laravel的对齐未正确地由一个刀片文件中的多个嵌入式css和外部css引起的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用laravel作为我的框架，我面临的问题是我@将一个php扩展为另一个php，它可以正常工作.但是我不确定为什么页面加载完成后布局会变得奇怪.

I am using laravel as my framework, i am facing the problem which is i @extends a php into another php, it works fine. But i not sure why the layout will become strange when the page is loading finish.

这是我的代码

@extends('layouts.cal')
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>

    <!-- Fonts -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>

    <!-- Styles -->
    {{-- <link href="{{ elixir('css/app.css') }}" rel="stylesheet"> --}}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

    <style>
        body {
            font-family: 'Lato';
        }

        .fa-btn {
            margin-right: 6px;
        }
    </style>
</head>
<body id="app-layout">
<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">

            <!-- Collapsed Hamburger -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#spark-navbar-collapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <!-- Branding Image -->
            <a class="navbar-brand" href="{{ url('/') }}">
                Laravel
            </a>
        </div>

        <div class="collapse navbar-collapse" id="spark-navbar-collapse">
            <!-- Left Side Of Navbar -->
            <ul class="nav navbar-nav">
                <li><a href="{{ url('/') }}">Home</a></li>
            </ul>

            <!-- Right Side Of Navbar -->
            <ul class="nav navbar-nav navbar-right">
                <!-- Authentication Links -->
                @if (Auth::guest())
                    <li><a href="{{ url('/login') }}">Login</a></li>
                    <li><a href="{{ url('/register') }}">Register</a></li>
                @else
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                            {{ Auth::user()->name }} <span class="caret"></span>
                        </a>

                        <ul class="dropdown-menu" role="menu">
                            <li><a href="{{ url('/logout') }}"><i class="fa fa-btn fa-sign-out"></i>Logout</a></li>
                        </ul>
                    </li>
                    @section('content1')
                        <div id="calendar"></div>
                        @endsection
                @endif
            </ul>
        </div>
    </div>
</nav>

@yield('content')

        <!-- JavaScripts -->
{{-- <script src="{{ elixir('js/app.js') }}"></script> --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

我的cal.blade.php 

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <link rel='stylesheet' href='css/lib/cupertino/jquery-ui.min.css' />
    <link href='css/fullcalendar.css' rel='stylesheet' />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>

    <!-- Styles -->
    {{-- <link href="{{ elixir('css/app.css') }}" rel="stylesheet"> --}}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    {{--<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />--}}
    <link rel='stylesheet' href='css/lib/cupertino/jquery-ui.min.css' />
    <link href='css/fullcalendar.css' rel='stylesheet' />
    {{--<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />--}}
    <script src='js/lib/moment.min.js'></script>
    <script src='js/lib/jquery.min.js'></script>
    <script src='js/fullcalendar.min.js'></script>
    <script>

        $(document).ready(function() {

            $('#calendar').fullCalendar({
                theme: true,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                dayClick: function(date, allDay, jsEvent, view) {
                    $("#eventdata").show();
                    $("#eventdata").load("/events/add/"+allDay+"/"+$.fullCalendar.formatRange( date, 'dd/MM/yyyy/HH/mm'));
                },

            });

        });

    </script>
    <style>

        body {
            margin: 40px 10px;
            padding: 0;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            font-size: 14px;
        }

        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }

    </style>
</head>
<body>


@yield('content1')


</body>
</html>

我添加的是

@extends('layouts.cal')

在if else语句中，我添加

And in the if else statement, i add 

@section('content1')
 <div id="calendar"></div>
@endsection

该功能工作正常，我只是无法找出问题，为什么页面加载完成后布局会发生变化.

The function works fine, i just cant find out what is the problem why the layout will change when the page is loading finish.

我尝试了这种方法. 

@extends('layouts.cal')
@section('content')
//my code here
@if (Auth::guest())
                    <li><a href="{{ url('/login') }}">Login</a></li>
                    <li><a href="{{ url('/register') }}">Register</a></li>
                @else
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                            {{ Auth::user()->name }} <span class="caret"></span>
                        </a>

                        <ul class="dropdown-menu" role="menu">
                            <li><a href="{{ url('/logout') }}"><i class="fa fa-btn fa-sign-out"></i>Logout</a></li>
                        </ul>
                    </li>
                    @section('content1')
                        <div id="calendar"></div>
                        @endsection
                @endif


@endsection

它仍然可以使用，但是问题是当用户未登录时页面的导航栏会消失.

It is still works, but the problem is the navigation bar of the page will be disappear when the user is not login.

修改了cal.blade.php

After modified the cal.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <link rel='stylesheet' href='css/lib/cupertino/jquery-ui.min.css' />
    <link href='css/fullcalendar.css' rel='stylesheet' />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>

    <!-- Styles -->
    {{-- <link href="{{ elixir('css/app.css') }}" rel="stylesheet"> --}}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    {{--<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />--}}
    <link rel='stylesheet' href='css/lib/cupertino/jquery-ui.min.css' />
    <link href='css/fullcalendar.css' rel='stylesheet' />
    {{--<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />--}}

    <style>

        body {
            margin: 40px 10px;
            padding: 0;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            font-size: 14px;
        }

        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }

    </style>
</head>
<body>
<script src='js/lib/moment.min.js'></script>
<script src='js/lib/jquery.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
<script>

    $(document).ready(function() {

        $('#calendar').fullCalendar({
            theme: true,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            dayClick: function(date, allDay, jsEvent, view) {
                $("#eventdata").show();
                $("#eventdata").load("/events/add/"+allDay+"/"+$.fullCalendar.formatRange( date, 'dd/MM/yyyy/HH/mm'));
            },

        });

    });

</script>

@yield('main_add_js')


</body>
</html>

推荐答案

始终从第一个刀片模板开始HTML.您的第一个刀片模板是cal.blade.php.因此，在该文件上启动HTML和body标签.

Always start your HTML with your first blade template. Your first blade template is cal.blade.php. So start your HTML and body tag on that file.

您所有必需的CSS文件都应包含在此文件中.

Your all essential CSS files should be included in this file.

例如:-

您的cal.blade.php文件应为

<html>
<head>
    // Add all your essential CSS files here.
 @yield('manual_add_css_section')
    // This yield section isoptional for you
</head>

<body>

 @yield('main_content_section')
  // This is the main content section. 2nd blade file will use this section. In your case you are using for displaying calender.    

   // Include all your required Js Files here just above `</body>` tag.

 @yield('manual_add_js_section')
   // This yield section is optional for you to use script tag. It will load at the end.
</body>
</html>

cal.blade.php

cal.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <link rel='stylesheet' href='css/lib/cupertino/jquery-ui.min.css' />
    <link href='css/fullcalendar.css' rel='stylesheet' />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>

    <!-- Styles -->
    {{-- <link href="{{ elixir('css/app.css') }}" rel="stylesheet"> --}}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    {{--<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />--}}
    <link rel='stylesheet' href='css/lib/cupertino/jquery-ui.min.css' />
    <link href='css/fullcalendar.css' rel='stylesheet' />
    {{--<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />--}}

    <style>

        body {
            margin: 40px 10px;
            padding: 0;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            font-size: 14px;
        }

        #calendar {
            max-width: 900px;
            margin: 0 auto;@section('content')
        }

    </style>
</head>
<body>



@yield('content')

@if (Auth::user())
<div id="calendar"></div>
@endif

<script src='js/lib/moment.min.js'></script>
<script src='js/lib/jquery.min.js'></script>
<script src='js/fullcalendar.min.js'></script>

<script>
    $(document).ready(function() {
      // Check calender div is exist or not. 
      // In case of guest user it will not present
      if($("#calendar").length ){
        $('#calendar').fullCalendar({
            theme: true,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            dayClick: function(date, allDay, jsEvent, view) {
                $("#eventdata").show();
                $("#eventdata").load("/events/add/"+allDay+"/"+$.fullCalendar.formatRange( date, 'dd/MM/yyyy/HH/mm'));
            },

        });
       }

    });
</script>


</body>
</html>

我在这里没有做太多更改.我已将此行添加到正文部分.

I have not make too much changes here. I have added this lines to body section.

@if (Auth::user())
<div id="calendar"></div>
@endif

app.blade.php

app.blade.php

@extends('layouts.cal')
@section('content')

                @if (Auth::guest())
                    <li><a href="{{ url('/login') }}">Login</a></li>
                    <li><a href="{{ url('/register') }}">Register</a></li>
                @else
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                            {{ Auth::user()->name }} <span class="caret"></span>
                        </a>

                        <ul class="dropdown-menu" role="menu">
                            <li><a href="{{ url('/logout') }}"><i class="fa fa-btn fa-sign-out"></i>Logout</a></li>
                        </ul>
                    </li>

                @endif


@endsection

我已经从该文件中删除了@section('content1')，因为这里不需要使用它.我已将该部分放入carl.blade.php文件中.也许您可以在任何需要的地方使用它.

I have removed @section('content1') from this file because there is no need to use it here. I have taken that section into carl.blade.php file. Perhaps you can use it anywhere you want.

希望这对您有用.

祝一切顺利. :)

这篇关于laravel的对齐未正确地由一个刀片文件中的多个嵌入式css和外部css引起的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆