基于Bootstrap的内联电话表单布局：子网格输入框需保持同行

我明白你的需求啦——要做一个带标签的电话输入组件，小屏幕下标签和输入组能堆叠，但三个输入框必须始终保持内联，不能折行。其实用Bootstrap的网格系统+Flex布局就能完美解决，不用纠结传统的内联类，具体实现如下：

核心思路 #

1. 用Bootstrap网格实现「标签+输入组」的响应式堆叠：大屏上左右排列，小屏自动上下堆叠
2. 给输入组套上d-flex类，强制三个输入框始终保持横向内联，不受屏幕尺寸影响
3. 用flex-fill让输入框均匀分配空间（也可以自定义宽度，根据需求调整）

完整代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>电话输入组件</title>
</head>
<body>
  <div class="container mt-4">
    <form>
      <!-- 外层行：标签+输入组 -->
      <div class="row align-items-center">
        <!-- 标签列：小屏占满宽度，大屏占3份 -->
        <label for="phone-group" class="col-sm-3 col-form-label">电话号码：</label>
        <!-- 输入组列：小屏占满宽度，大屏占9份 -->
        <div class="col-sm-9">
          <!-- 核心：用d-flex让三个输入框始终内联 -->
          <div class="d-flex">
            <input type="text" class="form-control flex-fill mx-1" placeholder="区号" aria-label="区号">
            <input type="text" class="form-control flex-fill mx-1" placeholder="号码前缀" aria-label="号码前缀">
            <input type="text" class="form-control flex-fill mx-1" placeholder="号码后缀" aria-label="号码后缀">
          </div>
        </div>
      </div>
    </form>
  </div>

  <!-- 引入依赖JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
</body>
</html>

关键类说明 #

• row align-items-center：让标签和输入组垂直居中对齐，提升视觉体验
• col-sm-3/col-sm-9：设置大屏下的列宽，当屏幕宽度小于sm（默认576px）时，两列自动变为col-12，实现堆叠
• d-flex：给输入组容器添加这个类，强制内部元素横向排列，且不会因为屏幕变小而折行
• flex-fill：让每个输入框自动填充可用空间，保持宽度一致；如果需要固定宽度，可以去掉这个类，给输入框加style="width: XXXpx"
• mx-1：给输入框添加左右间距，避免挤在一起

为什么不用form-inline？ #

Bootstrap的form-inline类在屏幕小于576px时会自动将元素堆叠，这正好和你需要的「输入框始终内联」需求冲突，所以用d-flex是更可靠的选择。

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