Question

使用：php7.2.7，win10，laravel5.6

login.blade.php已经有@extends和@section，所以我直接制作了一个登录表单。

login.blade.php代码：

@extends('layouts.app')

@section('content')

<div class="columns">
    <div class="column">
        <div class="card">
            <div class="card-content">
                <h1 class="title">Login</h1>
                <div class="field">
                    <label for="email" class="label">Email</label>
                    <p class="control">
                        <input type="text" name="email" id="email" placeholder="name@example.com">
                    </p>
                </div>
                <div class="field">
                        <label for="password" class="label">password</label>
                        <p class="control">
                            <input type="text" name="password" id="password" placeholder="name@example.com">
                        </p>
                    </div>
            </div>
        </div>
    </div>
</div>


@stop

app.blade.php代码：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'forum') }}</title>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="//cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">


    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>

    <div id="app">
        <div class="navbar is-fixed-top has-shadow">
            <div class="container">
                <div class="navbar-start is-fixed-top">
                    <a class="navbar-item" href=" {{route('home')}} ">
                        <img src=" {{asset('images/bulma-logo.png')}} " style="height: 30px; width:auto;" alt="FORUM LOGO">
                    </a>
                    <a href="" class="navbar-item is-tab is-hidden-mobile m-l-10">Learn</a>
                    <a href="" class="navbar-item is-tab is-hidden-mobile">Discuss</a>
                    <a href="" class="navbar-item is-tab is-hidden-mobile">Share</a>
                </div>

                <div class="navbar-end is-fixed-top" style="overflow: visible;">
                    @if (Auth::guest())
                    <a href="" class="navbar-item is-tab">Login</a>
                    <a href="" class="navbar-item is-tab">Register</a>


                    @else

                    <div class="navbar-menu">
                        <div class="navbar-end">
                            <b-dropdown v-model="navigation" position="is-bottom-left">
                                <a class="navbar-item" slot="trigger">
                                    <span>Profile</span>
                                    <b-icon icon="menu-down"></b-icon>
                                </a>

                                <b-dropdown-item custom>
                                    Logged in as <b>Vidan Stosic</b>
                                </b-dropdown-item>
                                <hr class="dropdown-divider">

                                <b-dropdown-item value="home">
                                    <b-icon icon="home"></b-icon>
                                    Home
                                </b-dropdown-item>
                                <b-dropdown-item value="products">
                                    <b-icon icon="cart"></b-icon>
                                    Products
                                </b-dropdown-item>
                                <b-dropdown-item value="blog" disabled>
                                    <b-icon icon="book-open"></b-icon>
                                    Blog
                                </b-dropdown-item>
                                <hr class="dropdown-divider">
                                <b-dropdown-item value="settings">
                                    <b-icon icon="settings"></b-icon>
                                    Settings
                                </b-dropdown-item>
                                <b-dropdown-item value="logout">
                                    <b-icon icon="logout"></b-icon>
                                    Logout
                                </b-dropdown-item>
                            </b-dropdown>
                        </div>
                    </div>
                </nav>
            </template>
                    @endif
    @yield('content')
    </div>
    <script src=" {{asset('js/app.js') }} "></script>
</body>
</html>

问题在于，所有内容都呈现在右侧，而不是下方。

Answer 1

添加两个关闭位置，因为您打开了6个，但是仅关闭了4个，因此只需添加并检查。

为什么我添加的所有内容都位于页面的右侧？

1 个答案: