html - 中心表单输入但不是标签

Question

我有的：

我想要的是：

我想让输入居中在页面上，如果可能的话，使用引导程序 4 将标签放在它的左侧。我想我可能需要偏移或拉动列，但似乎 justify-content center 忽略了任何拉动或偏移类。

HTML (Django):

<form class="login" method="POST" action="{% url 'account_login' %}">
    {% csrf_token %}

    {% for field in form %}

    <div class="row my-4 justify-content-center">

        <div class="col-2  float-right text-right">
            {{ field.label }}
        </div>

        <div class="col-4  float-left"> 
            <div class="accountFieldWrapper">
                {{ field|add_class:"form-control w-100" }}
            </div>
        </div>
    </div>

    {% endfor %}

    <div class="row my-4 justify-content-center">
        <button class="primaryAction btn btn-dark" type="submit">{% trans "Sign In" %}</button>
    </div>

    <div class="row my-4 justify-content-center">
        <a class="button secondaryAction" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
    </div>


</form>

标签： htmltwitter-bootstrapbootstrap-4django-templates