bootstrap 3導航欄對齊登錄問題？

我遇到幾個實施login form in bootstrap 3 in navbar的問題。我附上下面的圖片：bootstrap 3導航欄對齊登錄問題？

我想要的「記住我」和「忘記密碼」與input boxes爲username和password右側下方對齊。但它們並不完全一致。
「忘記密碼」的顏色是藍色，我希望它是白色（或紅色）。
「記住我」和「忘記密碼」的字體與我放置在窗體中的佔位符不一致。

我該如何解決這些問題？

<div class="navbar-collapse collapse"> 
       <form class="navbar-form navbar-right" role="form" action="" method="post"> 
       {% csrf_token %} 
       <div class="form-group {% if login_failed %} has-error {% endif %}"> 
       {{ form.username.label_tag }} 
        <input type="text" placeholder="Uname or Email" class="form-control input-sm" {% if login_failed %} 
         id = "inputError" {% endif %} name="username"> 
       </div> 
       <div class="form-group {% if login_failed %} has-error {% endif %}"> 
        <input type="password" placeholder="Password" class="form-control input-sm" name="password" 
        {% if login_failed %} id = "inputError" {% endif %}> 
       </div> 
       <button type="submit" class="btn btn-success">Sign in</button><br> 
       <div class="form-group"> 
        <div class="col-xs-12"> 
        <label><input type="checkbox" value="remember-me">Remember me</label> 
        <label><a class="help-inline" href="{% url 'django.contrib.auth.views.password_reset' %}">Forgot password?</a></label> 
       </div> 
      </div>

enter image description here

來源

2014-04-16 brain storm

用標記中的「form-inline」替換類「navbar-form」。

說一樣，直接將類標籤「忘記密碼」，或者更一般地說：

.navbar-collapse a{color:red}

http://jsfiddle.net/u2pNA/

來源

2014-04-17 03:45:01 Yoann

的鏈接的jsfiddle不顯示任何內容。你可否確認？ –

我更新了它：http://jsfiddle.net/u2pNA/1/，你可以試試這個嗎？並試圖擴展你的結果窗口作爲導航欄是崩潰它將消失，如果太小 – Yoann

什麼都沒有顯示..你可以確認這個鏈接http://jsfiddle.net/u2pNA/1/？ –

我不familar Django的，但我會嘗試看看，如果我可以用你的引導問題的幫助。要分開記住我和忘記密碼，你可以做這樣的事情。分隔條件爲兩列（2×COL-XS-6），而不是使用一個（COL-XS-12）

<div class="form-group"> 
       <div class="col-xs-6"> 
       <label><input type="checkbox" value="remember-me">Remember me</label</div><div class="col-xs-6"><label><a class="help-inline" href="{% url'django.contrib.auth.views.password_reset' %}">Forgot password?</a></label> 
      </div>

要更改忘記密碼白色的顏色，你就需要設置一個類鏈接。

所以也許像

.navbar .form-group a{color:#FFF}

希望有點幫助。祝你好運。

來源

2014-04-17 03:28:26 AceWebDesign

bootstrap 3導航欄對齊登錄問題？

回答

相關問題