Question

我正在完成Flask教程，但我无法使Bootstrap导航栏工作。我想我的所有代码都是指定的教程，我的文件夹树应该是它。

我的app.py：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

的index.html：

{% extends 'layout.html' %}

{% block body %}
  HOME
{% endblock %}

的layout.html：

<html>
  <head>
    <meta charset="utf-8">
    <title>MyFlaskApp</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  </head>
  <body>
    {% include 'includes/_navbar.html' %}
    {% block body %}{% endblock %}

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  </body>
</html>

_navbar.html：

<nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">MyFlaskApp</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/articles">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

文件夹结构如下：

Answer 1

尝试将以下代码添加到layout.html文件中，

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">MyFlaskApp</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active"><a class="nav-link" href="/">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="/about">About</a></li>
          <li class="nav-item"><a class="nav-link" href="/articles">Articles</a></li>
        </ul>
    </div>

它将提供以下输出，

Bootstrap导航栏无法在Flask中运行

1 个答案: