如何使表单字段响应？

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

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