將「登錄鏈接」從Bootstrap導航欄移動到右側

我正在開發Django網站，我正在使用Bootstrap/CSS/HTML以獲得審美外觀。將「登錄鏈接」從Bootstrap導航欄移動到右側

我創建了一個navbar menu，我想將我的login tab置於右側。但是，它可能是愚蠢的，我沒有得到一個好的結果：

我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>

如果用戶連接：

而且如果用戶未連接：

我真的很新的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>

來源

2017-01-09 Deadpool

'Connexion'後面有一個''標籤，可能會造成干擾。 – snanda

@ilovecoding哦，是的，我忘了刪除我的最後一次嘗試;）我必須將''標記，但我沒有找到一種方法來做到這一點.. – Deadpool

只是你必須把第一{% if user.is_authenticated %}的{% endif %}</ul>之前，它會工作。

來源

2017-01-09 15:08:24

謝謝！它完美的作品。現在我明白了，我在'

{％if_user.is_authenticaded％} {％endif％}'塊之後寫了'{％endif％}''，而不是'

{％if_user.is_authenticaded％} {％endif％} ' – Deadpool

您可以添加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%;"

來源

2017-01-09 14:26:40 LowMatic

我不想用CSS來做到這一點，bootstrap就足夠了，我只需要使用'{％user.is_authenticated％}'標籤;） – Deadpool

.navbar-right，你在你的模板必須是使鏈接拉動頁面右側的類。 See the docs here.儘管您沒有顯示完整的模板，但它會顯示在模板的{% 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>

來源

2017-01-09 14:27:33 YPCrumble

是的，所以我的'{％else％}'標籤放置不當？我只想把「登錄」放在用戶沒有登錄的地方，當用戶登錄時登出。 – Deadpool

@Valentin你必須展示你的模板。您可能只需移動'％{else％}'標記，但更有可能需要添加多個'{％user.is_authenticated％}'標記，就像我在更新中顯示的那樣。 – YPCrumble

是的，我已經嘗試插入多個'{％user.is_authenticated％}'但沒有任何效果。你想我粘貼我的整個HTML腳本（120行）？ – Deadpool

將「登錄鏈接」從Bootstrap導航欄移動到右側

回答

相關問題