Question

<!DOCTYPE html>
    <html>
        <head>
            <title>GucciGang Website</title>
            <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.css') }}">
        </head>
        <body>
            <header>
                <div class="navbar navbar-inverse">
                    <div class="navbar-inner">
                        <a class="brand" href="/">Real Python (for the web!)</a>
                        <ul class="nav">
                            <li class="active"><a href="/">Home</a></li>
                            <li><a href="/welcome">Welcome</a></li>
                            <li><a href="/">222</a></li>
                        </ul>
                    </div>
                </div>
            </header>
            <div class="container">
                {% block content%}
                {% endblock %}
            </div>
        </body>
    </html>

使用带有Bootstrap的template.html，我希望我的页面看起来像

但实际上看起来像是

我的代码中哪一部分错了？我错过了什么吗？

Answer 1

只需将navbar-nav类添加到无序列表标记

即可

＆LT; ul class="nav navbar-nav">

https://www.w3schools.com/bootstrap/bootstrap_navbar.asp

使用自举烧瓶固定布局

1 个答案: