如何让我的Flask表单实现全设备响应式？

当前代码的核心问题 #

• 栅格仅用col-md-8，小屏幕（手机、平板竖屏）下无适配规则，易导致表单过宽或布局拥挤
• 内联固定height:500px在小屏幕会挤压表单元素，强制滚动体验差
• 内联样式分散，无法统一做响应式调整

具体修改方案 #

1. 优化栅格布局

给表单容器的列添加多屏幕适配类，确保不同设备下宽度合理：
将原col-md-8替换为col-sm-10 col-md-8 col-lg-6，对应：

• 小屏幕（≥576px）占10/12宽度
• 中等屏幕（≥768px）占8/12宽度
• 大屏幕（≥992px）占6/12宽度

2. 移除固定高度，改用自适应布局

删除内联height:500px，改用min-height: auto，让小屏幕下表单高度随内容自适应，避免强制滚动。

3. 迁移内联样式到外部CSS，添加响应式规则

把内联的背景色、padding等样式移到外部CSS，并添加媒体查询适配小屏幕：

.signup-form-wrapper {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  border-radius: 10px;
  min-height: auto;
  margin-top: 50px;
  overflow-y: auto;
}

/* 小屏幕适配（手机） */
@media (max-width: 575px) {
  .signup-form-wrapper {
    padding: 15px;
    margin-top: 20px;
  }
  .signup-form-wrapper h6 {
    font-size: 1.1rem;
  }
  .form-group label {
    font-size: 0.9rem;
  }
}

修改后的完整HTML代码

<div class="main-banner header-text" id="top">
  <div class="Modern-Slider">
    <div class="item item-3">
      <div class="img-fill">
        <div class="text-content">
          <div class="container">
            <div class="row justify-content-center align-items-center">
              <!-- 优化栅格类 -->
              <div class="col-sm-10 col-md-8 col-lg-6">
                <!-- 移除内联样式，改用外部CSS -->
                <div class="signup-form-wrapper">
                  <div class="text-center">
                    <h6 style="color: #a4c639;">投资概况评估</h6>
                  </div>
                  <form action="{{ url_for('home') }}" method="POST" class="question-form">
                    {{ question_form.hidden_tag() }}
                      <div class="form-group">
                        <label for="not_member_name">{{ question_form.not_member_name.label }}</label>
                        {{ question_form.not_member_name(class_='form-control') }}
                      </div>
                      <div class="form-group">
                        <label for="not_member_email">{{ question_form.not_member_email.label }}</label>
                        {{ question_form.not_member_email(class_='form-control') }}
                      </div>
                      <div class="form-group">
                        <label for="not_member_phone">{{ question_form.not_member_phone.label }}</label>
                        {{ question_form.not_member_phone(class_='form-control') }}
                      </div>
                    {% for i in range(1, 8) %}
                      <div class="form-group">
                        <label for="question{{ i }}">{{ question_form['question' ~ i].label }}</label>
                        {{ question_form['question' ~ i](class_='form-control', id='question' ~ i) }}
                        {% for error in question_form['question' ~ i].errors %}
                          <span class="error">{{ error }}</span>
                        {% endfor %}
                      </div>
                    {% endfor %}
                    <div class="form-group text-center">
                      {{ question_form.submit(class_='btn btn-primary', style='background-color: #a4c639; border-color: #a4c639;') }}
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

额外提示 #

• 确保已正确引入Bootstrap 4/5的响应式CSS文件
• 可根据实际需求调整媒体查询断点和样式参数，比如更小屏幕下的按钮大小

内容的提问来源于stack exchange，提问作者Δημητρης Τζιαβρας