Flask // bootstrap // навигационная панель не отображается правильно - PullRequest
Новая
       46

Flask // bootstrap // навигационная панель не отображается правильно

0 голосов
/ 14 января 2020

Я довольно новичок в Flask и Bootstrap, и я пытаюсь воссоздать панель навигации из (https://getbootstrap.com/docs/4.0/components/navbar/)

У меня есть база. html file: 

    {% extends 'bootstrap/base.html' %}

    {% block title %}
        {% if title %}{{ title }} - Title{% else %}Title{% endif %}
    {% endblock %}

    {% block navbar %}


    <div class="navbar navbar-fixed-top navbar-expand-lg navbar-dark bg-primary">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
        <a class="navbar-brand" href="#">Hidden brand</a>
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </div>
{% endblock %}

{% block content %}

{% endblock %}

Тогда у меня есть app.py:

from flask import Flask, render_template, request
import pandas as pd
from flask_bootstrap import Bootstrap

def create_app():
    app = Flask(__name__)
    Bootstrap(app)
    return app

app = create_app()


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

app.run()

И мой индекс. html: 

{% extends "base.html" %}

{% block content %}
<h1> Test </h1>
{% endblock %}

Но, к сожалению, моя навигационная панель выглядит так: navbar

Есть идеи, что может произойти?

1 Ответ

0 голосов
/ 18 января 2020

Код HTML, который вы используете, предназначен для Bootstrap 4, однако расширение Flask (Flask - Bootstrap), которое вы используете, поддерживает только Bootstrap 3. Он будет включать ресурс Bootstrap 3 в шаблоне bootstrap/base.html.

Вы можете изменить код HTML на Bootstrap 3 или использовать другое расширение Flask, которое поддерживает Bootstrap 4.

...