如何使表单字段响应？

Question

我刚开始学习 django 几周。 为了更有效地学习，我开始构建一个酒店网站并使用 heroku 进行部署。 该网站在我的笔记本电脑上看起来更好，但在我的 ipad 或手机上看起来更糟。 我想使用 css 或 django 脆皮表单使表单字段具有响应性。 我找到了很多答案，但没有一个能帮助我理解如何去做。 此外，作为 Web 开发初学者，我还会向我推荐对该网站的任何进一步推荐。 这是网站： https : //hotel-jumera.herokuapp.com （我的网站建设实践，如有版权问题，请见谅）模板中的表单字段：

<form  method='post'>
    {% csrf_token %}
    {{booking_form.as_p }}
    <button type="submit" class="btn btn-success"> Send </button>
</form>

Answer 1

您想要做的是在您的 css 中设置一些断点，您可以在其中更改站点上元素的宽度

@media only screen and (min-width: 400px) {
  .col-2 {
      background-color: red;
  }
}

如果浏览器窗口为 600px 或更大，背景颜色将为红色。 这是移动优先的方法。 您为移动设备构建网站，然后添加断点以适应更大屏幕tablet min-width: 600px和desktop min-width: 1200px