Bootstrap 导航栏在本地服务器和实时服务器上看起来不同,但在通过文件打开它时是可以的

f5emj3cl  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(2)|浏览(214)

我正在为一家公司创建一个网站,当我只使用文件打开主页时,我得到了以下结果

但是当我将它们上传到服务器后打开它们时(我已经上传到https://appdevpanda.com的Live服务器和使用“Web Server for Chrome”的本地服务器),结果是

index.html的代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>App Dev Panda</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="style/style.css" />
    <link rel="stylesheet" type="text/css" href="style/hover.css" />
    <script src="main.js"></script>
     <!-- Bootstrap core CSS -->
     <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
     <script type="text/javascript" src="particles.js"></script>
     <script type="text/javascript" src="app.js"></script>
     <!-- Custom styles for this template -->
    <link href="css/logo-nav.css" rel="stylesheet">
  
   
</head>
<body>
  <style>
    ul li{
      display: inline;
    }

  </style>
      <!-- Navigation -->
      <nav class="navbar navbar-expand-lg navbar-dark bg-danger fixed-top">
        <div class="container">
          <a class="navbar-brand" href="index.html">
            <img src="images/logo.png" width="100" height="100" alt="">
          </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item active">
                <a class="nav-link" href="index.html" style="margin-right: 16px;">HOME
                  <span class="sr-only">(current)</span>
                </a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropbtn" href="#" style="margin-right: 16px;">SERVICES</a>
                <div class="dropdown-content">
                        <a href="web_dev.html" style="text-decoration: none;">Web Development</a>
                        <a href="android-dev.html" style="text-decoration: none;">Android Development</a>
                        <a href="software-dev.html" style="text-decoration: none;">Software Development</a>
                        <a href="game-dev.html" style="text-decoration: none;">Game Development</a>
                        <a href="ai-dev.html" style="text-decoration: none;">AI Development</a>
                </div>
            </li>
              <li class="nav-item">
                <a class="nav-link" href="portfolio.html" style="margin-right: 16px;">PORTFOLIO</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="about.html" style="margin-right: 16px;">ABOUT US</a>
              </li>
              <li class="nav-item">
                  <a href="contact.html" class="btn" style="background: #AEFC88;margin-right: 16px;color: inherit;">Contact us</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      
      <div class="myheader">
        
        <div id="particles-js">
               
        </div>
        <center>
                <h1> We are digital developers</h1>
        </center>
        

     </div>
     
     <!-- scripts -->
     <script src="particles.js"></script>
     <script src="app.js"></script>
     
     <!-- stats.js -->
     <script src="js/lib/stats.js"></script>
     <script>
       var count_particles, stats, update;
       stats = new Stats;
       stats.setMode(0);
       stats.domElement.style.position = 'absolute';
       stats.domElement.style.left = '0px';
       stats.domElement.style.top = '0px';
       document.body.appendChild(stats.domElement);
       count_particles = document.querySelector('.js-count-particles');
       update = function() {
         stats.begin();
         stats.end();
         if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
           count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
         }
         requestAnimationFrame(update);
       };
       requestAnimationFrame(update);
     </script>
      <!-- Page Content 
      <div class="container" style="padding: 24px;
      background: #292424;z-index: 9999;color: #292424">
        <h1 class="mt-5">Logo Nav by Start Bootstrap</h1>
       
    </div>-->

      <div class="skills">
            <ul>
                <li><img id = "mobiledev" class='img-circle hvr-grow' src='images/Mobile-App-Development.png' />
                </li>
                <li><img id = "webdev" class='img-circle' src='images/webdev.jpg' />
                </li>
                <li><img id = "softwaredev" class='img-circle' src='images/desktop-app-development.png' />
                </li>
                <li><img id = "gamedev" class='img-circle' src='images/gamedev.jpg' />
                </li>
                <li><img id = "aidev" class='img-circle' src='images/aidev.jpg' />
                </li>
            </ul>
            <br>
      </div>
      <div class="skills">
            <h2 id="development_field">Android Development</h2>
      </div>
      <div class="skills">
            <p id="development_details">We provide top-notch android development service</p>
      </div>
      <!-- /.container -->
  
      <!-- Bootstrap core JavaScript -->
      <script src="vendor/jquery/jquery.min.js"></script>
      <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
   <!--   <div class="header" style="color: white;
      position: relative;">
          <h1>Hello</h1>
      </div>!-->
      <script src="skills.js"></script>

      <div id="consultancy_Ad">
          <marquee behavior="alternate"><h3 style=" text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);" >Get 60 minutes consultancy for free</h3></marquee>
      </div>

      <div id="testemonials">
          <h3>Our Happy Clients</h3>
      </div>
      
     
            <div class="speech-bubble" style="width: 200px;height: 150px;padding: 16px;margin: 16px;color: white;">
                    Bla Bla Bla Bla
            </div>
            <img class="dp" src="images/utkarsh.jpg">
            <h6 class="testemonial-intro">Mr. Utkarsh Dixit</h6>
            <p class="testemonial-intro">Owner and Founder of IndiaOnlineMart.com</p>

           
    <footer>
                
        <div class="footer">
                <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
                <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
                <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
                <!------ Include the above in your HEAD tag ---------->
                
                <!--Pulling Awesome Font -->
            
                                <div class="col-md-12">
                                    <ul class="social-network social-circle">
                                        <li><a href="#" class="icoRss" title="Rss"><i class="fa fa-rss"></i></a></li>
                                        <li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
                                        <li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
                                        <li><a href="#" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>
                                        <li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
                                    </ul>               
                                </div>
                
        </div>
    </footer>

</body>
</html>

样式代码. css

@font-face{
    font-family: thefont;
    src: url('../fonts/theboldfont.ttf');
}

@font-face{
    font-family: themenufont;
    src: url('../fonts/fontawesome-webfont.woff');
}
body{
    margin: 0;
    padding: 0;
}
.myheader{
    background: #dc3545;
    width: 100%;
    height: 500px;
    margin: 0;
    padding: 16px;
    color: white;
    font-size: 24px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

#particles-js{
    width: 100%;
    height: 500px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0 !important;
}
.skills{
    background: #292424;
    width: 100%;
    padding: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px !important;
}

.img-circle{
    border-radius: 50%;
    width: 200px;
    height: 200px;
    border: 5px solid #AEFC88;
    background: white;
    margin: 16px;
    object-fit: scale-down;
}

.img-circle:hover{
    border: 5px solid #EE5050 !important;
}

#consultancy_Ad{
    background: #AEFC88;
    width: 100%;
    padding-top: 24px;
    padding-bottom: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: 'thefont'
}

#testemonials{
    width: 100%;
    padding: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'thefont';
    color: #292424;
    font-size: 24px !important;
}

.speech-bubble { position: relative; background: #ee5050; border-radius: .4em; 
    margin-left: 24px;}
.speech-bubble:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 0; border: 39px solid transparent; border-top-color: #ee5050; border-bottom: 0; border-left: 0; margin-left: -19.5px; margin-bottom: -39px; }
.dp{
    border-radius: 50%;
    width: 100px;
    height: 100px;
    border: 5px solid #AEFC88;
    background: white;
    margin: 24px;
    margin-left: 24px;
    object-fit:fill;
}

.testemonial-intro{
    margin: 16dp;
    font-family: thefont;
    color: #292424;
    margin: 16px;
    text-align: left;
}

.dropbtn {
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    text-align: center;
    justify-content: center;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when
*/

.footer {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30vh;
    background-color: #292424;
    color: white;
    text-align: center;
    padding: 40px;
}

ul.social-network {
    list-style: none;
    display: inline;
    margin-left:0 !important;
    padding: 0;
}
ul.social-network li {
    display: inline;
    margin: 0 5px;
}

/* footer social icons */
.social-network a.icoRss:hover {
    background-color: #F56505;
}
.social-network a.icoFacebook:hover {
    background-color:#3B5998;
}
.social-network a.icoTwitter:hover {
    background-color:#33ccff;
}
.social-network a.icoGoogle:hover {
    background-color:#BD3518;
}
.social-network a.icoVimeo:hover {
    background-color:#0590B8;
}
.social-network a.icoLinkedin:hover {
    background-color:#007bb7;
}
.social-network a.icoRss:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i,
.social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.icoLinkedin:hover i {
    color:#fff;
}
a.socialIcon:hover, .socialHoverClass {
    color:#44BCDD;
}

.social-circle li a {
    display:inline-block;
    position:relative;
    margin:0 auto 0 auto;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
    text-align:center;
    width: 50px;
    height: 50px;
    font-size:20px;
}
.social-circle li i {
    margin:0;
    line-height:50px;
    text-align: center;
}

.social-circle li a:hover i, .triggeredHover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -ms--transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
    transition: all 0.2s;
}
.social-circle i {
    color: #fff;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -o-transition: all 0.8s;
    -ms-transition: all 0.8s;
    transition: all 0.8s;
}

a {
 background-color: #D3D3D3;   
}

.gallery-title
{
    font-size: 36px;
    color: #42B32F;
    text-align: center;
    font-weight: 500;
    margin-bottom: 70px;
    margin-top: 50px;
}
.gallery-title:after {
    content: "";
    position: absolute;
    width: 7.5%;
    left: 46.5%;
    height: 45px;
    border-bottom: 1px solid #5e5e5e;
}
.filter-button
{
    font-size: 18px;
    border: 1px solid #42B32F;
    border-radius: 5px;
    text-align: center;
    color: #42B32F;
    margin-bottom: 30px;

}
.filter-button:hover
{
    font-size: 18px;
    border: 1px solid #42B32F;
    border-radius: 5px;
    text-align: center;
    color: #ffffff;
    background-color: #42B32F;

}
.btn-default:active .filter-button:active
{
    background-color: #42B32F;
    color: white;
}

.port-image
{
    width: 100%;
}

.gallery_product
{
    
    margin-bottom: 30px;
    display: block;
    object-fit: scale-down;
}

#filter{
    width: 100%;
}

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

#portfolio {  
    margin: 1rem 0;
    -webkit-column-count: 3; 
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 1rem;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    -webkit-column-width: 33.33333333333333%;
    -moz-column-width: 33.33333333333333%;
    column-width: 33.33333333333333%;
}
.tile { 
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease;

}
.tile:hover { 

}

.scale-anm {
  transform: scale(1);
}



.tile img {
    max-width: 100%;
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
  
}

.btn {
    font-family: Lato;
    font-size: 1rem;
    font-weight: normal;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    line-height: normal;
    padding: .5rem 1rem;
    margin: 0;
    height: auto;
    border: 1px solid;
    vertical-align: middle;
    -webkit-appearance: none;
    color: #555;
    background-color: rgba(0, 0, 0, 0);
}

.btn:hover {
  text-decoration: none;
}

.btn:focus {
  outline: none;
  border-color: var(--darken-2);
  box-shadow: 0 0 0 3px var(--darken-3);
}

::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.container {
    position: relative;
}

.image {
  opacity: 1;
  border: 1px solid black;
  object-fit: scale-down;
  transition: .5s ease;
  backface-visibility: hidden;
  
  height: 10px;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  right: 50%;
  bottom: 50%;
  transform: translate(50%,50%);
  position: absolute;
  text-align: center;
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  border-radius: 10px;  
  background-color: #EE5050;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

.skill-img {
    margin: 10px;
    transition: all .1s ease;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

.skill-img:hover{
    transform: scale(1.1);
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    .column {
        margin-right: 0;
        margin-top: 20px;
    }
}

在基于server的html中还有一个更改,它显示为

而在基于 file 的html中,它类似于

portfolio.html的代码(最后一张图片的html是)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>App Dev Panda</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="style/style.css" />
    <link rel="stylesheet" type="text/css" href="style/hover.css" />
    <script src="main.js"></script>
     <!-- Bootstrap core CSS -->
     <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
     <script type="text/javascript" src="particles.js"></script>
     <script type="text/javascript" src="app.js"></script>
     <!-- Custom styles for this template -->
    <link href="css/logo-nav.css" rel="stylesheet">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>   
<script src="main.js"></script>

  <link rel='stylesheet prefetch' href='https://npmcdn.com/basscss@8.0.0/css/basscss.min.css'>

      <link rel="stylesheet" href="css/style.css">

</head>
<body>
      <!-- Navigation -->
      <nav class="navbar navbar-expand-lg navbar-dark bg-danger fixed-top">
        <div class="container">
          <a class="navbar-brand" href="index.html">
            <img src="images/logo.png" width="100" height="100" alt="">
          </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item">
                <a class="nav-link" href="index.html" style="margin-right: 16px;">HOME
                  <span class="sr-only">(current)</span>
                </a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropbtn" href="#" style="margin-right: 16px;">SERVICES</a>
                <div class="dropdown-content">
                        <a href="web_dev.html" style="text-decoration: none;">Web Development</a>
                        <a href="android-dev.html" style="text-decoration: none;">Android Development</a>
                        <a href="software-dev.html" style="text-decoration: none;">Software Development</a>
                       <a href="game-dev.html" style="text-decoration: none;">Game Development</a>
                        <a href="ai-dev.html" style="text-decoration: none;">AI Development</a>
                </div>
            </li>
              <li class="nav-item active">
                <a class="nav-link" href="portfolio.html" style="margin-right: 16px;">PORTFOLIO</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="about.html" style="margin-right: 16px;">ABOUT US</a>
              </li>
              <li class="nav-item">
                  <a href="contact.html" class="btn" style="background: #AEFC88;margin-right: 16px;color: inherit;">Contact us</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      
      <div class="myheader">
        
        <div id="particles-js">
               
        </div>
        <center>
                <h1>Portfolio</h1>
        </center>
        
     
              
              
              
     </div>
     
     <!-- scripts -->
     <script src="particles.js"></script>
     <script src="app.js"></script>
     
     <!-- stats.js -->
     <script src="js/lib/stats.js"></script>
     <script>
       var count_particles, stats, update;
       stats = new Stats;
       stats.setMode(0);
       stats.domElement.style.position = 'absolute';
       stats.domElement.style.left = '0px';
       stats.domElement.style.top = '0px';
       document.body.appendChild(stats.domElement);
       count_particles = document.querySelector('.js-count-particles');
       update = function() {
         stats.begin();
         stats.end();
         if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
           count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
         }
         requestAnimationFrame(update);
       };
       requestAnimationFrame(update);
     </script>
  

  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <!------ Include the above in your HEAD tag ---------->
  <center>
    <div class="toolbar mb2 mt2">
        <button class="btn btn-info fil-cat" href="" data-rel="all">All</button>
        <button class="btn btn-info fil-cat" data-rel="web">Web</button>
        <button class="btn btn-info fil-cat" data-rel="android">Android</button>
        <button class="btn btn-info fil-cat" data-rel="logo">Logo</button>
      </div> 
       
  </center>
 
  <div id="portfolio">
   
    <div class="tile scale-anm web all container" >
        
      <img src="images/banner.png" alt="Avatar" class="image">
        <div class="middle scale-anm web all">
          <div class="text scale-anm web all">Hair Paradise
            <br>
            <br>
            <button type="button" class="btn btn-info">View</button>
          </div>
        
        </div>
    </div>

    <div class="tile scale-anm android all container">
        
        <img src="images/dream11.png" alt="Avatar" class="image">
          <div class="middle scale-anm android all">
            <div class="text scale-anm android all">Dream 11 Expert Prediction, News, Tips and Teams
              <br>
              <br>
              <button type="button" class="btn btn-info">View</button>
            </div>
          
          </div>
      </div>

      <div class="tile scale-anm android all container">
        
          <img src="images/namamidevinarmade.jpg" alt="Avatar" class="image">
            <div class="middle scale-anm android all">
              <div class="text scale-anm android all">Namami Devi Narmade
                <br>
                <br>
                <button type="button" class="btn btn-info">View</button>
              </div>
            
            </div>
        </div>
    
    
  </div>

      <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

      <script src="js/index.js"></script>

    <footer>
                
        <div class="footer">
               
                <!--Pulling Awesome Font -->
                <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
                
                
                                <div class="col-md-12">
                                    <ul class="social-network social-circle">
                                        <li><a href="#" class="icoRss" title="Rss"><i class="fa fa-rss"></i></a></li>
                                        <li><a href="#" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
                                        <li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
                                        <li><a href="#" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>
                                        <li><a href="#" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
                                    </ul>               
                                </div>
                
        </div>
    </footer>

</body>
</html>

请,请,请帮我解决这个问题,我正在努力解决这个问题,从很长一段时间。

xe55xuns

xe55xuns1#

若要在与服务器更相似的环境中预览网站,请尝试在您的计算机上本地运行Web服务器。
一个快速简单的选择是使用http-serverhttps://www.npmjs.com/package/http-server
安装这个程序,然后在你的文件夹中运行http-server .。这样你就可以在电脑上预览你的项目了。

2nc8po8w

2nc8po8w2#

问题是我链接了多个bootstrap和jquery以及不同的版本,所以我清理了它们,现在一切都好了,谢谢

相关问题