css 为什么我的引导程序网站没有响应?

mm9b1k5b  于 2022-12-05  发布在  其他
关注(0)|答案(1)|浏览(124)

我试图使一个网站使用引导程序5.0的响应,但它没有响应。
当我打开谷歌浏览器响应查看器时,我看到我的网站没有响应。我该如何解决这个问题?

<!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>


当我打开谷歌Chrome响应查看器时,我看到我的网站没有响应。有人能告诉我是什么问题吗?

kmbjn2e3

kmbjn2e31#

你应该尝试,并确保包括JS导入为您的引导版本太多,如果我没有错,你使用的引导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页面,以了解事情是如何工作的。
希望这对你有帮助

相关问题