【问题标题】：Why is bootstrap not working in my laravel's home page?为什么 bootstrap 在我的 laravel 主页中不起作用？
【发布时间】：2020-12-27 13:39:35
【问题描述】：

到目前为止我做了什么

首先，我对 laravel 真的很陌生。我正在 YouTube 上观看一个很棒的教程，并按照大部分说明进行操作。我将项目上传到我的域，因为我想尝试数据库连接在生产环境中的工作方式并使用 MySql（这个人在视频中使用 sqlite）。即使我设法使项目按预期工作，但当我打开页面时，它看起来并不好，屏幕越小，看起来越糟糕，您可以横向移动（真的很可怕）。

它曾经工作正常

例如，当我从托管程序创建一个空白 laravel 项目并用我的手机访问它时，它运行良好，我的意思是说“Laravel”的字体有边距，所有内容看起来都居中并且作为一个应该看到一个引导页面。在我按照教程创建项目并上传后，噩梦就开始了。

给你看代码

基础 laravel 项目说“Laravel”，而我的项目说“gastiGram”（评论为“¡¡¡这是问题！！！”）；也许字母越少，它在移动设备上也能很好地工作（当然我在开玩笑，我一定是在某个地方搞砸了）。这是代码，伙计们，所以也许你可以帮助我。谢谢。

welcome.blade.php

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

        <title>gastiGram</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: 'Nunito', sans-serif;
                font-weight: 200;
                height: 100vh;
                margin: 0;
            }

            .full-height {
                height: 100vh;
            }

            .flex-center {
                align-items: center;
                display: flex;
                justify-content: center;
            }

            .position-ref {
                position: relative;
            }

            .top-right {
                position: absolute;
                right: 10px;
                top: 18px;
            }

            .content {
                text-align: center;
            }

            .title {
                font-size: 84px;
            }

            .links > a {
                color: #636b6f;
                padding: 0 25px;
                font-size: 13px;
                font-weight: 600;
                letter-spacing: .1rem;
                text-decoration: none;
                text-transform: uppercase;
            }

            .m-b-md {
                margin-bottom: 30px;
            }
        </style>
    </head>
    <body>
        <div class="flex-center position-ref full-height">

            @if (Route::has('login'))
                <div class="top-right links">
                    @auth
                        <a href="{{ url('/home') }}">Home</a>
                    @else
                        <a href="{{ route('login') }}">Login</a>

                        @if (Route::has('register'))
                            <a href="{{ route('register') }}">Register</a>
                        @endif
                    @endauth
                </div>
            @endif

            <div class="content">
                <div class="title m-b-md">
                    gastiGram <!-- ¡¡¡HERE IS THE PROBLEM!!! -->
                </div>
                <div class="navbar-brand">
                    <div>

                    </div>
                </div>

                <div class="links">
                    <a href="https://laravel.com/docs">Docs</a>
                    <a href="https://laracasts.com">Laracasts</a>
                    <a href="https://laravel-news.com">News</a>
                    <a href="https://blog.laravel.com">Blog</a>
                    <a href="https://nova.laravel.com">Nova</a>
                    <a href="https://forge.laravel.com">Forge</a>
                    <a href="https://vapor.laravel.com">Vapor</a>
                    <a href="https://github.com/laravel/laravel">GitHub</a>
                </div>
            </div>
        </div>
    </body>
</html>

【问题讨论】：

你需要包含`{{asset("css/app.css") }}`并运行npm run dev
嗨@KamleshPaul 我应该在哪里/如何包含它？请注意，托管程序不支持 npm，所以我应该正确包含它，在我的本地环境中运行该 npm 命令然后再次上传吗？提前致谢。
在本地运行它将生成public/css/app.css，您需要将其上传到服务器并包含该 iin 标题
我已经在本地环境中至少运行了两次该命令（我不知道这是创建文件的原因，我真的是 laravel 的新手）。该文件已存在。
您能否检查一下您的 app.css 文件中的 cmets 中有以下几行，Bootstrap v4.5.2 (https://getbootstrap.com/) 版本可能不同

标签： laravel vue.js bootstrap-4

【解决方案1】：

因为似乎没有人为我找到答案......

我尝试了其他人所说的，我的结论是bootstrap和vue都没有问题。我想这是因为 content 和 title m-b-md 类没有提供我期望的文本响应能力

 <div class="content">
    <div class="title m-b-md">
        gastiGram <!-- ¡¡¡HERE IS WHERE THE PROBLEM WAS!!! -->
    </div>
    <div class="navbar-brand">
        <div>

        </div>
    </div>

    <div class="links">
        <a href="https://laravel.com/docs">Docs</a>
        <a href="https://laracasts.com">Laracasts</a>
        <a href="https://laravel-news.com">News</a>
        <a href="https://blog.laravel.com">Blog</a>
        <a href="https://nova.laravel.com">Nova</a>
        <a href="https://forge.laravel.com">Forge</a>
        <a href="https://vapor.laravel.com">Vapor</a>
        <a href="https://github.com/laravel/laravel">GitHub</a>
    </div>
</div>

我愿意接受证明我所说的是错误的答案，并且我可以在这个项目中应用其他解决方案来解决我的问题。 Kamlesh Paul 的建议对我很有用……现在我对 laravel 的工作原理有了一些更好的了解；仍然不够，因为字体横向折叠，应用他所说的可行，但没有，所以我只是手动应用了样式

<h1 style="font-size:20vw;">gastiGram</h1>

【讨论】：

【解决方案2】：

 <link href="{{asset('css/app.css')}}" rel="stylesheet">

我解决了将此代码放在welcome.blade.php 页面头部的问题。

【讨论】：