Question

如果我从浏览器中运行以下代码（从getbootstrap中的轮播模板中提取），则该代码将成功执行：

<!DOCTYPE html>
<!-- saved from url=(0052)https://getbootstrap.com/docs/4.3/examples/carousel/ -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="generator" content="Jekyll v3.8.5">
    <title>Carousel Template · Bootstrap</title>

    <link rel="canonical" href="https://xxxxx/">

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/jumbotron.css" >
    <link rel="stylesheet" type="text/css" href="css/carousel.css" rel="stylesheet">
    <link href="./Carousel Template · Bootstrap_files/bootstrap.min.css" rel="stylesheet"  crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/bootstrap-dropdown.js"></script>   
    <script type="text/javascript" src="js/jquery-3.3.1.slim.min.js"></script>

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
    <!-- Custom styles for this template -->

  </head>
  <body>
    <!--header-->
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <a class="navbar-brand">XXXXXXX</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Main menu</a>
          <div class="dropdown-menu" aria-labelledby="dropdown01">
            <a class="dropdown-item" href="signin.html">Sign In</a>
            <a class="dropdown-item" href="register.html">Register</a>
            <a class="dropdown-item" href="#">About</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="signin.html">Sign In</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="register.html">Register</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="https://getbootstrap.com/docs/4.3/examples/carousel/#">Disabled</a>
        </li>
      </ul>
      <form class="form-inline mt-2 mt-md-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
<!--/header-->

</body>
</html>

我将所有href替换为{{ url_for('static',filename='javascript name or css name')}} 并使用render_template('testnewhome.html')

调用页面

我在wsgi中没有任何错误，但外观确实不同。

只是让您了解：从浏览器执行的html代码看起来是这样的 good looking

如果我从python运行它，它看起来就是这样

bad looking

有任何线索吗？我真的很困

Answer 1

已排序。代码没有问题，您可以将其用作参考。我只是从ccs文件夹中删除了所有css文件，并将它们复制了过来。看起来getbootstrap分发文件不好。因此，我建议大家下载一个工作页面，并使用下载的CSS和JS创建一个新页面。

HIH

python3不执行getbootstrap html代码

1 个答案: