Django/CSS 图标和表单输入在同一列

Question

我无法将来自 font awesome 的图标和表单输入放在同一列中。

<div class="form-group">
   <form method="POST" enctype="multipart/form-data">
      {% csrf_token %}
      {{ form.media }}
      <div class="row pt-3">
         <i class="fa fa-user fa-lg">{{ form.username }}</i>
      </div>
   </form>
</div>

上面的代码，截图如下：

我想要看起来像下面的图片：

感谢您的帮助。

Answer 1

使用flexbox而不是行来处理框更好，以获得更大的对齐灵活性。

试试下面的代码

<div class="form-group">
   <form method="POST" enctype="multipart/form-data">
      {% csrf_token %}
      {{ form.media }}
      <div class="d-flex pt-3">
         <i class="fa fa-user fa-lg mr-2 "></i>{{ form.username }}
      </div>
   </form>
</div>

Django/CSS 图标和表单输入在同一列

Django/CSS Icon and form input in same column

css

django-forms

bootstrap-4