Как исправить проект Laravel, который правильно отображается только на компьютерах, кроме моего?

Мой компьютер с OS X не может должным образом отображать конкретный проект Laravel. Я могу войти в систему, но кажется, что весь CSS заблокирован. Это неправильно выглядит так:

Однако это должно выглядеть так:

Как исправить проект Laravel, который правильно отображается только на компьютерах, кроме моего?

У моего друга, который написал большую часть кода, тоже есть Mac, и он работает на его компьютере. Но не мое. Я ничего из этого не кодировал. Я пробовал 3 браузера (FF, Chrome, Safari), но безрезультатно. Он работает на моем телефоне Android и другом компьютере с Windows.

Здесь видно: https://shielded-lowlands-91684.herokuapp.com/

Я могу поделиться репо на Gitlab (https://gitlab.com/kaspis912/blog) или Heroku. Однако в Gitlab мне нужно добавить человека индивидуально, потому что он частный.

Я также могу добавить отдельные файлы, которые здесь помогут. Вот один из них: App.blade.php

<!DOCTYPE html>
<html lang = "{{ 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', 'Blog') }}</title>
    <link href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel = "stylesheet">
    <!-- Styles -->
    <link href = "{{ asset('css/app.css') }}" rel = "stylesheet">
</head>
<body>
    <div id = "app">
        <nav class = "navbar navbar-default navbar-static-top">
            <div class = "container">
                <div class = "navbar-header">

                    <!-- Collapsed Hamburger -->
                    <button type = "button" class = "navbar-toggle collapsed" data-toggle = "collapse" data-target = "#app-navbar-collapse" aria-expanded = "false">
                        <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('/') }}">
                        {{ config('app.name') }}
                    </a>
                </div>

                <div class = "collapse navbar-collapse" id = "app-navbar-collapse">
                    <!-- Left Side Of Navbar -->
                    @if (Auth::user())
                    <ul class = "nav navbar-nav">
                        <li><a href = "{{ route('articles.index') }}">Articles</a></li>
                    </ul>
                    @endif

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

                                <ul class = "dropdown-menu">
                                    <li>
                                        <a href = "{{ route('logout') }}"
                                            onclick = "event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                            Logout
                                        </a>

                                        <form id = "logout-form" action = "{{ route('logout') }}" method = "POST" style = "display: none;">
                                            {{ csrf_field() }}
                                        </form>
                                    </li>
                                    <li>
                                        <a id = "delete-btn" href = "#">
                                            Delete Account
                                        </a>
                                        <form id = "delete-form" method = "POST" action = "{{ route('users.destroy', Auth::id()) }}" accept-charset = "UTF-8">
                                            {{ method_field('DELETE') }}
                                            {{csrf_field()}}
                                        </form>
                                    </li>
                                </ul>
                            </li>
                        @endguest
                    </ul>
                </div>
            </div>
        </nav>

        @yield('content')
    </div>

    <!-- Scripts -->
    <script src = "{{ asset('js/app.js') }}"></script>
    <script>
        $('.confirm-delete').on('click', function(event){
            return confirm('Are you sure you want to delete this item?');
        });

        $('#delete-btn').on('click', function(event){
            event.preventDefault();
            var confirm_delete = confirm('Are you sure you want to delete your account?');
            if (confirm_delete== true){
                $('#delete-form').submit();
            }
        });
    </script>
</body>
</html>

Вот что происходит, когда я пытаюсь проверить элемент в Chrome. Кажется, что некоторые из CSS становятся серыми. Не знаю почему.

Попробуйте также разместить ресурсы (css / js) через https.

— 27.06.2018 11:55

Показать код просмотра

— 27.06.2018 11:58

@AdnanMumtaz Я только что добавил app.blade.php и могу добавить еще при необходимости.

— 27.06.2018 12:05

@ Туим, где я могу это найти? Я больше знаком с Ruby on Rails, но с радостью посмотрю, дадите ли вы мне знать, в каком файле он будет. Я включил app.blade.php, если это вам поможет.

— 27.06.2018 12:07

css laravel heroku

27.06.2018 11:51

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

317

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используйте secure_asset

измените эти 2 строки

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

с участием

<link href = "{{ secure_asset('css/app.css') }}" rel = "stylesheet">
<script src = "{{ secure_asset('js/app.js') }}"></script>

27.06.2018 12:22

Другие вопросы по теме

Как заставить ajax работать в laravel?

Полоса: скрытые поля с полосой отображают ошибку проверки

Как правильно использовать необязательные параметры маршрута с Laravel 5.6?

Laravel: как задание в очереди может переместиться в failed_jobs в случае сбоя?

Общая сумма заказа PayPal с Laravel

Передача данных из laravel в компонент в виде лезвия

Строка запроса отправки Laravel с необязательными параметрами

October CMS extension System / Models / File

NotFoundHttpException в промежуточном программном обеспечении и контроллере Laravel

Объединить массив с таким же ключом

Как исправить проект Laravel, который правильно отображается только на компьютерах, кроме моего?

Ответы 1

Другие вопросы по теме

Похожие вопросы