Bootstrap5.2邮件表单中等屏幕适配：标签需随输入框同步换行

问题描述 #

我使用Bootstrap 5.2实现了一个HTML/CSS邮件表单，该表单在桌面端和移动端显示正常，但在中等尺寸屏幕（min-width: 520px 至 max-width: 991px）存在适配问题。我希望当输入框#given_name_input换行时，对应的标签#given_name_text（显示文本“Given name:”）也同步换行。已设置好对应范围的CSS媒体查询，但不清楚应写入何种样式规则。

现有代码 #

HTML代码 #

<div id="main-content" class="container">

      <h1>Contact Us</h1>
      <p>Use this form Use this form Use this form Use this form Use this form Use this form Use this form Use this form Use this form Use this form Use this form Use this form
        Use this form Use this form Use this form Use this form Use this form Use this form Use this form Use this form Use this form Use this form Use this form Use this form
      </p>

      <div id="name_input" class="row">
          <label for="surname_input" id="surname_text" class="float-start">Surname:</label>       
          <input id="surname_input" class="float-start" type="text">
          <label for="given_name_input" id="given_name_text" class="float-start">Given name:</label>       
          <input id="given_name_input" class="float-start" type="text"> 
      </div>

      <div id="mail_input" class="row">
        <label for="email_input" id="email_text" class="float-start">E-mail address:</label>       
        <input id="email_input" class="float-start" type="email">
      </div>

      <label for="meessage_input" id="message_text">Your message:</label>
      <input id="message_input" type="text">

      <button type="button" id="s">Send message</button>

    </div>

CSS代码 #

#surname_text {
    font-weight: 700;
    width: 90px;
}

#surname_input {
    width: 300px;
    height: 30px;
    margin-bottom: 20px;
}

#given_name_text {
    font-weight: 700;
    width: 130px;
    text-align: right;
}

#given_name_input {
    width: 300px;
    height: 30px;
    margin-bottom: 20px;
}

#email_text {
    font-weight: 700;
    width: 140px;
}

#email_input {
    width: 300px;
    height: 30px;
    margin-bottom: 20px;
}

#message_text {
    font-weight: 700;
    width: 160px;
}

#message_input {
    width: 100%;
    height: 250px;
    margin-bottom: 20px;
}

#message_button {
    width: 130px;
    height: 30px;
    margin-bottom: 20px;
    background-color: #f46530;
    font-weight: 700;
    color: #E7E7E7;
    border: 3px solid #0c0c0c;
}

#message_button:hover {
    background-color: #0c0c0c;
}

@media (max-width: 519px) {
    #given_name_text {
        text-align: left;
    }
}

@media (min-width: 520px) and (max-width: 991px) {
    
    
}

解决方案 #

方案1：使用Bootstrap网格系统（推荐，符合框架设计） #

把每个“标签+输入框”的组合封装到独立的网格列中，确保两者作为一个整体换行：

1. 修改HTML的#name_input部分：

<div id="name_input" class="row g-3">
    <div class="col-auto">
        <label for="surname_input" id="surname_text" class="form-label fw-bold">Surname:</label>       
        <input id="surname_input" class="form-control" type="text">
    </div>
    <div class="col-auto">
        <label for="given_name_input" id="given_name_text" class="form-label fw-bold text-end">Given name:</label>       
        <input id="given_name_input" class="form-control" type="text"> 
    </div>
</div>

2. 调整CSS，移除标签和输入框的固定宽度（改用Bootstrap内置类控制），并完善媒体查询：

/* 可删除原有的标签、输入框固定宽度设置，改用Bootstrap类 */
@media (min-width: 520px) and (max-width: 991px) {
    #given_name_text {
        text-align: left; /* 中等屏幕下标签左对齐，保持视觉统一 */
    }
}

方案2：使用CSS Flex布局（少改HTML的方案） #

通过Flex布局将标签和输入框绑定为一个整体，实现同步换行：

1. 修改CSS：

#name_input {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* 控制两个输入组的间距 */
}
/* 把每个标签+输入框组合成一个Flex项 */
#name_input .input-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

2. 修改HTML，给每个“标签+输入框”添加容器：

<div id="name_input" class="row">
    <div class="input-group">
        <label for="surname_input" id="surname_text" class="fw-bold">Surname:</label>       
        <input id="surname_input" type="text">
    </div>
    <div class="input-group">
        <label for="given_name_input" id="given_name_text" class="fw-bold text-end">Given name:</label>       
        <input id="given_name_input" type="text"> 
    </div>
</div>

3. 完善媒体查询：

@media (min-width: 520px) and (max-width: 991px) {
    #given_name_text {
        text-align: left;
    }
}

问题根源 #

原代码使用float-start浮动布局，浮动元素是独立的，当容器宽度不足时，输入框会单独换行，而标签仍跟随前序元素，导致两者分离。将标签和输入框绑定为一个整体（网格列/Flex组）即可解决该问题。

内容的提问来源于stack exchange，提问作者moussioG4