Html 将表单输入居中，而不是标签

我所拥有的：

我想要的是：

我想让输入集中在页面上，如果可能的话，使用bootstrap4将标签放在页面左侧。我想我可能需要偏移或拉取列，但资源中心似乎忽略了任何拉取或拉取类

HTML（Django）：

{%csrf_令牌%}
{%形式的字段为%}
{{field.label}
{field | add_类：“表单控件w-100”}
{%endfor%}
{%trans“登录”%}

您在上面发布了服务器端代码，但在这种情况下（因为这是前端问题），您应该向呈现的源代码提供呈现的元素，基本上是浏览器获得的源代码。我的问题是如何在我的用例中使用引导，这实际上不是一个问题或bug。我认为呈现的html中没有任何有用的上下文。您在上面发布了服务器端代码，但在这种情况下（因为这是一个前端问题），您应该向呈现的源代码提供呈现的元素，基本上是浏览器获得的源代码。我的问题是如何在我的用例中使用引导，这实际上不是一个问题或bug。我认为在呈现的html中没有任何有用的上下文。

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