Q&A
前提・実現したいこと
ruby on rails６において、bootstrapのテンプレートのインストールを行いました。その際に、ページがうまく表示されず困っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
下記のリンク先のように表示が崩れてしまっている状態です。
https://gyazo.com/a3f1facd335a8cb69052d15a7dd9664d[リンク内容]
見本のサイト
リンク内容
該当のソースコード
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Themebau | Blog 1</title> <meta name="description" content="Themebau"> <meta name="author" content="RunWebRun"> <link rel="icon" type="image/png" href="assets/images/favicon.png"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet"> <!-- START: Styles --> <!-- Swiper --> <link rel="stylesheet" href="assets/vendor/swiper/dist/css/swiper.min.css" /> <!-- Fancybox --> <link rel="stylesheet" href="assets/vendor/fancybox/dist/jquery.fancybox.min.css" /> <!-- Themebau --> <link rel="stylesheet" href="assets/css/themebau.min.css"> <!-- Custom Styles --> <link rel="stylesheet" href="assets/css/custom.css"> <!-- END: Styles --> <!-- jQuery --> <script src="assets/vendor/jquery/dist/jquery.min.js"></script> </head> <body> <header class="navbar navbar-top navbar-expand"> <div class="container"> <a class="navbar-brand" href="index.html"> <img width="107" src="assets/images/logo.svg" alt=""> </a> <a class="navbar-toggle" href="#navbar-mobile-style-2" data-fancybox data-base-class="fancybox-navbar" data-keyboard="false" data-auto-focus="false" data-touch="false" data-close-existing="true" data-small-btn="false" data-toolbar="false"> <span></span> <span></span> <span></span> </a> <ul class="nav navbar-nav"> <li class="nav-item navbar-dropdown navbar-dropdown-mega"> <a href="index-1.html" class="nav-link"> <span class="nav-link-name">home</span> <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1 9L5 5L1 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> </svg> </a> <div class="dropdown-menu"> <div class="container"> <ul role="menu" class="navbar-nav row gh-1 gv-3"> <li class="nav-item col-md-6 col-lg-3 col-xl-2"> <a href="home.html" class="nav-link"><span class="nav-link-image"><img src="assets/images/demos/main-home.jpg" alt=""></span><span class="nav-link-name">main home</span> </a> </li> <li class="nav-item col-md-6 col-lg-3 col-xl-2"> <a href="simple-portfolio.html" class="nav-link"><span class="nav-link-image"><img src="assets/images/demos/simple-portfolio.jpg" alt=""></span><span class="nav-link-name">simple portofolio</span> </a> </li> <li class="nav-item col-md-6 col-lg-3 col-xl-2"> <a href="creative-agency.html" class="nav-link"><span class="nav-link-image"><img src="assets/images/demos/creative-agency.jpg" alt=""></span><span class="nav-link-name">creative agency</span> </a> </li> <li class="nav-item col-md-6 col-lg-3 col-xl-2"> <a href="freelancer-portfolio.html" class="nav-link"><span class="nav-link-image"><img src="assets/images/demos/freelancer-portfolio.jpg" alt=""></span><span class="nav-link-name">freelancer portfolio</span> </a> </li> <li class="nav-item col-md-6 col-lg-3 col-xl-2"> <a href="interactive-links-dark.html" class="nav-link"><span class="nav-link-image"><img src="assets/images/demos/interactive-dark.jpg" alt=""></span><span class="nav-link-name">interactive dark</span> </a> </li> <li class="nav-item col-md-6 col-lg-3 col-xl-2"> <a href="interactive-links-light.html" class="nav-link"><span class="nav-link-image"><img src="assets/images/demos/interactive-light.jpg" alt=""></span><span class="nav-link-name">interactive light</span> </a> </li> <li class="nav-item col-md-6 col-lg-3 col-xl-2"> <a href="left-menu.html" class="nav-link"><span class="nav-link-image"><img src="assets/images/demos/left-menu.jpg" alt=""></span><span class="nav-link-name">left menu</span> </a> </li> <li class="nav-item col-md-6 col-lg-3 col-xl-2"> <a href="digital-agency.html" class="nav-link"><span class="nav-link-image"><img src="assets/images/demos/digital-agency.jpg" alt=""></span><span class="nav-link-name">digital agency</span> </a> </li> <li class="nav-item col-md-6 col-lg-3 col-xl-2"> 中略 <!-- START: Scripts --> <!-- Object Fit Polyfill --> <script src="assets/vendor/object-fit-images/dist/ofi.min.js"></script> <!-- Popper --> <script src="assets/vendor/popper.js/dist/umd/popper.min.js"></script> <!-- Bootstrap --> <script src="assets/vendor/bootstrap/dist/js/bootstrap.min.js"></script> <!-- Bootstrap Validator --> <script src="assets/vendor/bootstrap-validator/dist/validator.min.js"></script> <!-- ImagesLoaded --> <script src="assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script> <!-- Swiper --> <script src="assets/vendor/swiper/dist/js/swiper.min.js"></script> <!-- Animejs --> <script src="assets/vendor/animejs/lib/anime.min.js"></script> <!-- Rellax --> <script src="assets/vendor/rellax/rellax.min.js"></script> <!-- Countdown --> <script src="assets/vendor/jquery-countdown/dist/jquery.countdown.min.js"></script> <!-- Moment.js --> <script src="assets/vendor/moment/min/moment.min.js"></script> <script src="assets/vendor/moment-timezone/builds/moment-timezone-with-data.min.js"></script> <!-- Isotope --> <script src="assets/vendor/isotope-layout/dist/isotope.pkgd.min.js"></script> <script src="assets/vendor/isotope-packery/packery-mode.pkgd.min.js"></script> <!-- Jarallax --> <script src="assets/vendor/jarallax/dist/jarallax.min.js"></script> <script src="assets/vendor/jarallax/dist/jarallax-video.min.js"></script> <!-- Fancybox --> <script src="assets/vendor/fancybox/dist/jquery.fancybox.min.js"></script> <!-- Themebau --> <script src="assets/js/themebau.min.js"></script> <!-- END: Scripts --> </body> </html>
試したこと
始めは上記のコードを貼り付けることしかしていませんでしたが、上記のコードの貼り付けだけでなく、コードの上下に記入されているassets/vendor/〜から始めるファイルも設置を行いました。
補足情報（FW/ツールのバージョンなど）
'rails', '> 6.0.0'> 4.5'
ruby '2.6.5'
bootstrap', '
jquery-rails
あなたの回答
tips
プレビュー
