logo标签列表

将“登录链接”从Bootstrap导航栏移动到右侧

htmlcssdjangotwitter-bootstrapnavbar
3

我正在开发一个Django网站，并使用Bootstrap/CSS/HTML来获得美观的外观。

我创建了一个导航菜单，我想将我的登录选项卡放在右侧。但是，也许有点傻，我没有得到好的结果：

我的HTML代码看起来像这样：

{% if user.is_authenticated %}
...
display all tabs
...

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

<li><a href="{% url "logout" %}"><span class="glyphicon glyphicon-log-out"></span> Déconnexion </a></li>
{% else %}
<li><a href="{% url "login" %}"><span class="glyphicon glyphicon-log-out"></span> Connexion </align></a></li>
{% endif %}
</ul>

如果用户已连接：

enter image description here

如果用户未连接：

enter code here

我对HTML/CSS/Bootstrap非常陌生，你有什么想法吗？
谢谢
编辑：
我的整个HTML脚本中有多个{% user.is_authenticated %}：
<!--DOCTYPE html -->
<html>
    <head>

    {% load staticfiles %}

    <title> DatasystemsEC - Accueil </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <link rel="stylesheet" type="text/css" href="{% static 'css/Base.css' %}"/>
    </head>

    <!-- #################### -->
    <!-- Upper navigation bar -->
    <!-- #################### -->

        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="http://www.test.fr/"> Logiciel </a>
                </div>

                <!-- Home tab -->

                <ul class="nav navbar-nav">
                    <li><a href="{% url "accueil" %}"> <span class="glyphicon glyphicon-home"></span> Accueil </a></li>

                <!-- Individual form tab -->
                    {% if user.is_authenticated %}
                    <li class = "dropdown">
                        <a href = "accueil" class = "dropdown-toggle" data-toggle = "dropdown">
                            <span class="glyphicon glyphicon-baby-formula"></span> Fiches Individuelles
                        <b class = "caret"></b>
                        </a>
                        <ul class = "dropdown-menu">
                            <li><a href = "{% url "home" %}"> Accueil des fiches individuelles </a></li>
                            <li><a href = "{% url "form" %}"> Création des fiches individuelles </a></li>
                            <li><a href = "{% url "searched" %}"> Consultation des fiches individuelles </a></li>
                            <li><a href = "{% url "edited" %}"> Edition des fiches individuelles </a></li>
                            <li><a href = "{% url "deleted" %}"> Suppression des fiches individuelles </a></li>
                        </ul>
                    </li>

                <!-- Birth form tab -->

                    <li class = "dropdown">
                        <a href = "accueil" class = "dropdown-toggle" data-toggle = "dropdown">
                            <span class="glyphicon glyphicon-baby-formula"></span> Actes de Naissance
                        <b class = "caret"></b>
                        </a>
                        <ul class = "dropdown-menu">
                            <li><a href = "{% url "BChome" %}"> Accueil des actes de naissance </a></li>
                            <li><a href = "{% url "BCform" %}"> Création d'un acte de naissance </a></li>
                            <li><a href = "http://localhost:8080/"> Consultation d'un acte de naissance </a></li>
                            <li><a href = "{% url "BCnotfound" %}"> Edition d'un acte de naissance </a></li>
                        </ul>
                    </li>

                <!-- Wedding form tab -->

                    <li class = "dropdown">
                        <a href = "accueil" class = "dropdown-toggle" data-toggle = "dropdown">
                            <span class="glyphicon glyphicon-heart"></span> Actes de Mariage
                        <b class = "caret"></b>
                        </a>
                        <ul class = "dropdown-menu">
                            <li><a href = "{% url "BCnotfound" %}"> Accueil des actes de mariage </a></li>
                            <li><a href = "{% url "BCnotfound" %}"> Création des actes de mariage </a></li>
                            <li><a href = "{% url "BCnotfound" %}"> Consultation des actes de mariage </a></li>
                            <li><a href = "{% url "BCnotfound" %}"> Edition des actes de mariage </a></li>
                        </ul>
                    </li>

                <!-- Divorce form tab -->

                <li class = "dropdown">
                        <a href = "accueil" class = "dropdown-toggle" data-toggle = "dropdown">
                            <span class="glyphicon glyphicon-fire"></span> Actes de Divorce
                        <b class = "caret"></b>
                        </a>
                        <ul class = "dropdown-menu">
                            <li><a href = "{% url "BCnotfound" %}"> Accueil des actes de divorce </a></li>
                            <li><a href = "{% url "BCnotfound" %}"> Création des actes de divorce </a></li>
                            <li><a href = "{% url "BCnotfound" %}"> Consultation des actes de divorce </a></li>
                            <li><a href = "{% url "BCnotfound" %}"> Edition des actes de divorce </a></li>
                        </ul>
                    </li>

                <!-- Death form tab -->

                    <li class = "dropdown">
                        <a href = "accueil" class = "dropdown-toggle" data-toggle = "dropdown">
                            <span class="glyphicon glyphicon-alert"></span> Actes de Décès
                        <b class = "caret"></b>
                        </a>
                        <ul class = "dropdown-menu">
                            <li><a href = "{% url "BCnotfound" %}"> Accueil des actes de décès </a></li>
                            <li><a href = "{% url "BCnotfound" %}"> Création des actes de décès </a></li>
                            <li><a href = "{% url "BCnotfound" %}"> Consultation des actes de décès </a></li>
                            <li><a href = "{% url "BCnotfound" %}"> Edition des actes de décès </a></li>
                        </ul>
                    </li>
                </ul>
                {% endif %}
                <!-- Connexion tab -->

                <ul class="nav navbar-nav navbar-right">
                    {% if user.is_authenticated %}
                    <li><a href="{% url "logout" %}"><span class="glyphicon glyphicon-log-out"></span> Déconnexion </a></li>
                    {% else %}
                    <li><a href="{% url "login" %}"><span class="glyphicon glyphicon-log-out"></span> Connexion </a></li>
                    {% endif %}
                </ul>
            </div>
        </nav>
        {% block content %}
        {% endblock content %}
</html>
Connexion 后面有一个 </align> 标签，可能会产生干扰。 - snanda
@ilovecoding 哦，是的，我忘记删除我的最后一次尝试 ;) 我必须放置<align></align>标签，但我找不到方法去做... - Essex
3个回答
2

只需将第一个 {% if user.is_authenticated %} 的 {% endif %} 放在 </ul> 之前，它就可以工作了。

谢谢！它完美地运行了。现在我明白了，我在块后面写了 {% endif %}，就像 <ul>{% if_user.is_authenticaded %}</ul>{% endif %} 而不是 <ul>{% if_user.is_authenticaded %}{% endif %}</ul>。 - Essex
0
你可以添加一个 position 属性，并为元素设置 left 和 right 值。
<div style="positon: absolute; top: 30%; left: 20%">
<ul class="nav navbar-nav navbar-right">
    <li>item</li>
</ul>
</div>

或者，您可以使用style="float:right; margin: 10%;"

。
我不想使用CSS来实现这个，Bootstrap已经足够了，我只需要玩一下{% user.is_authenticated %}标签就好了;) - Essex
0

.navbar-right 是您模板中的类，它使链接靠右侧对齐。在此处查看文档。 尽管您没有显示完整的模板，但似乎此标记在模板的 {% else %} 部分被截断。

根据您的模板，您可能需要包含多个 {% user.is_authenticated %} 标签。根据上面的模板片段，这将解决您的问题：

{% if user.is_authenticated %}
...
display all tabs
...
{% endif %}

<ul class="nav navbar-nav navbar-right">
{% if user.is_authenticated %}
<li><a href="{% url "logout" %}"><span class="glyphicon glyphicon-log-out"></span> Déconnexion </a></li>
{% else %}
<li><a href="{% url "login" %}"><span class="glyphicon glyphicon-log-out"></span> Connexion </align></a></li>
{% endif %}
</ul>
是的，所以我的 {% else %} 标签放置不当了吗？我想在用户未登录时只放置 "登录"，而在用户已登录时放置 "注销"。 - Essex
@Valentin，你需要展示你的模板。有可能你只需要移动%{ else %}标签，但更有可能的是你需要像我在更新中展示的那样添加多个{% user.is_authenticated %}标签。 - YPCrumble
是的，我已经尝试过插入多个 {% user.is_authenticated %} 但没有任何效果。你想要我粘贴我的整个HTML脚本（120行）吗？ - Essex
@Valentin 那会有帮助。 - YPCrumble
整个脚本都在上面，以便找到解决方案。 - Essex
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接