Question

我在实施login form in bootstrap 3 in navbar方面遇到了一些问题。我附上了下面的图片：

我希望“记住我”和“忘记密码”与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

Answer 1

替换班级＆＃34; navbar-form＆＃34; by＆＃34; form-inline＆＃34;在标签中。

如上所述，将一个班级直接应用于标签＆＃34;忘记密码＆＃34;，或更一般地：

.navbar-collapse a{color:red}

http://jsfiddle.net/u2pNA/

Answer 2

我不熟悉django，但我会试着看看我是否可以帮助解决你的引导问题。要分开记住我和忘记密码，你可以做这样的事情。分成两列（2x 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}

希望有所帮助。祝你好运。

登录引导3导航栏对齐问题？

2 个答案: