Question

所以，我有一个登录表单，如果在没有导航栏的情况下运行，表单本身也可以运行。但是，当我添加bootstrap的导航栏时，整个表单（和div）都可以点击，每次点击它或在电子邮件/密码字段上发送请求。我试图修复它，但到目前为止我还没有成功。任何帮助表示赞赏！

的layout.html

<!doctype html>
<html>
    <head>
        <title>{% block title %}{% endblock %}</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
<body>
<nav class="navbar navbar-inverse navbar navbar-fixed-stop" role="navigation" style="border-radius:0px;">
        <div class="container-fluid">
            <div class="navbar-header"><a class="navbar-brand" href="#">BGP Monitor</a></div>
            <ul class = "nav navbar-nav">
                {% if g.user.is_authenticated %}
                <li><a href ="{{ url_for('admin_control') }}">Admin Panel</a></li>
                {% endif %}
            </ul>
            <ul class="nav navbar-nav navbar-right">
                {% if g.user.is_authenticated %}
                <li><a href ="{{ url_for('logout') }}">Logout</li>
                {% else %}
                <li><a href ="{{ url_for('login') }}">Login</li>
                {% endif %}
            </ul>
        </div>
    </div>
</nav>
<div class="container-fluid" id="container">
    {% block content %}{% endblock %}
</div>
</body>
</html>

的login.html

{% extends "layout.html" %}
{% block content %}
<form action="{{ url_for('login')}}" class="navbar-form navbar-right" method="POST">
        {{ form.hidden_tag() }}
        <div class="form-group">
        {{ form.email(class="form-control", placeholder="Username") }}
        </div>
        <div class="form-group">
        {{ form.password(class="form-control", placeholder="Password") }}
        </div>
        <div class="form-group">
        <button class="btn btn-default" type="submit">Sign In</button>
        </div>
</form>
{% endblock %}

它看起来如何（忽略它没有居中）

我在浏览器上打开它时的页面来源：

<!doctype html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
<body>
<nav class="navbar navbar-inverse navbar navbar-fixed-stop" role="navigation" style="border-radius:0px;">
        <div class="container-fluid">
            <div class="navbar-header"><a class="navbar-brand" href="#">BGP Monitor</a></div>
            <ul class = "nav navbar-nav">

            </ul>
            <ul class="nav navbar-nav navbar-right">

                <li><a href ="/login">Login</li>

            </ul>
        </div>
    </div>
</nav>
<div class="container-fluid" id="container">

<form action="/login" class="navbar-form navbar-right" method="POST">
        <input id="csrf_token" name="csrf_token" type="hidden" value="ImZhNTQzYmQ0MzllNWUxYWFmYWNkZjQyY2MyNDc2NDhiZTlhYTE0YzQi.C33d4w.ZRE0Lr6NmOLQ3CMHYkJ0fsfQj4k">
        <div class="form-group">
        <input class="form-control" id="email" name="email" placeholder="Username" type="text" value="">
        </div>
        <div class="form-group">
        <input class="form-control" id="password" name="password" placeholder="Password" type="password" value="">
        </div>
        <div class="form-group">
        <button class="btn btn-default" type="submit">Sign In</button>
        </div>
</form>

</div>
</body>
</html>

谢谢

P.S正如Booboobeaker评论的那样，我在登录/退出按钮后错过了。现在好了！

使用bootstrap的导航栏可以使整个表单可单击。我怎么能阻止它呢？

0 个答案: