如何使表單字段響應？

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