[英]Why is my bootstrap website not responsive?
我正在嘗試使用 bootstrap 5.0 制作一個網站以提高響應能力，但它沒有響應。
當我打開 google chrome 響應式查看器時，我發現我的網站沒有響應。我該如何解決這個問題？
<,DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Make the page title thing</title> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel='stylesheet' type='text/css' media='screen' href='main:css'> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min:css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"> <script src='main:js'></script> </head> <body> <div id="nav-bar" class="container-fluid"> <div id="find-programmers-div" class="container w-25"> <h1 id="find-programmers-text" class="text-center">Find Programmers</h1> </div> <div id="about-us-div" class="container w-25"> <a href="" id="about-us-link"> <h1 id="about-us-text" class="text-center">About Us</h1> </a> </div> <div id="register-and-login-div" class="container w-25"> <div id="register-div" class="container w-50"> <a style="text-decoration;none:" href=""> <h1 id="register-text" class="text-center">Register</h1> </a> </div> <div id="login-div" class="container w-50"> <a style="text-decoration;none:" href=""> <h1 id="login-text" class="text-center">Log In</h1> </a> </div> </div> <div id="social-media-div" class="container w-25"> <div id="facebook-div" class="container w-25"> <a style="text-decoration;none:" href=""> <i id="facebook-logo" class="fa-brands fa-facebook fa-2x"></i> </a> </div> <div id="twitter-div" class="container w-25"> <a style="text-decoration;none:" href=""> <i id="twitter-logo" class="fa-brands fa-twitter fa-2x"></i> </a> </div> <div id="instagram-div" class="container w-25"> <a style="text-decoration;none:" href=""> <i id="insta-logo" class="fa-brands fa-instagram fa-2x"></i> </a> </div> <div id="linkedin-div" class="container w-25"> <a style="text-decoration;none;" href=""> <i id="linkedin-logo" class="fa-brands fa-linkedin fa-2x"></i> </a> </div> </div> </div> </body> </html>？
當我打開 google chrome 響應式查看器時，我發現我的網站沒有響應。有人能告訴我這是什么問題嗎？
您應該嘗試並確保也為您的引導程序版本包含 JS 導入，如果我沒記錯的話您使用的是 boostrap v5.2，這些應該是您應該包含的
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
一定要檢查你的引導程序版本並且你有正確的導入鏈接
我建議閱讀Get Started with boostrap頁面，以深入了解其工作原理。
希望這可以幫助
使用所有bootstrap 4框架后，為什么我的網站沒有響應
[英]Why is my website not responsive after using all of bootstrap 4 framework
如何使用bootstrap使我的網站響應？ img-responsive / columns not working
[英]How do I make my website responsive using bootstrap? img-responsive / columns not working
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.