css - 如何使用验证表单按钮自定义具有固定标题标题和固定页脚的表单（html）？

Question

我开发了 Django 应用程序，需要为数据输入自定义标准表单，以适应下面附加图像中的结构。

您还可以查看我当前的“完成工作”的代码，但想知道这是否是这样做的好方法，或者是否有更好的做法。

我已经为我的固定标题标题、固定页脚底部和我的 2 个按钮“保存”和“取消”定义了 CSS 类

html

<nav class="navbar navbar-expand-md navbar-dark bg-info fixed-top" style="padding-top: 50px;">...</nav>

<!-- content form for field data entry -->
<div class="box row-full" id="heading-title">
    <h3>Nouveau projet</h3>
</div>
<div class='container' style="margin-top:200px;margin-bottom:200px">
    <form id="projecteditform" method="POST" class="post-form">
        {% csrf_token %}
        {{ form|crispy }}
        <button id="ajouter_projet" class="btn btn-info .fixed-save" type="submit"
            style="width: 100px; z-index:2">Valider</button>
        <a data-modal data-target="" class="btn btn-dark .fixed-cancel" href="{% url 'project:index_projet' %}"
            style="width: 100px; z-index:2">Annuler</a>
    </form>
</div>
<div class="box row-full" id="footer-buttons"></div>
<!-- end content form for field data entry -->

<footer class="page-footer font-small blue fixed-bottom" style="background-color:white; z-index:1">...</footer>

css

.box {
  width: 100px;
  max-height: 60px;
  color: white;
}

#heading-title {
  position: fixed;
  padding-top: 20px;
  top: 100px;
  color:black;
  background: white;
}

#footer-buttons {
  position: fixed;
  bottom: 50px;
  background: white;
}
.row-full{
  width: 100vw;
  position: relative;
  margin-left: -50vw;
  text-align: center;
  height: 100px;
  left: 50%;
}

.fixed-save{
  position: fixed;
  bottom: 80px;
}

感谢您的建议

标签： cssdjangoforms

Answer 1

根据我发现django-widget-tweaks是格式化 django 表单的最佳方法之一

看到这个