Question

我刚开始学习django几周了。为了更有效地学习，我已经开始建立酒店网站并使用heroku进行部署。该网站在我的笔记本电脑上看起来更好，但在我的iPad或移动设备上看起来更糟。我想使用CSS或django crispy表单使表单字段响应。我找到了很多答案，但是没有一个可以帮助我理解如何做。另外，作为网站开发的初学者，我会推荐该网站的任何其他建议。这是网站：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

如何使表单字段具有响应性？

1 个答案: