如何用Bootstrap 3.3.7实现Bootstrap 4的多输入框功能？

嘿，这个问题我刚好折腾过，咱们把事儿说透：

• Bootstrap 3.3.7本身不原生支持这种多输入框布局
  它的input-group组件默认只适配单个输入框搭配前置/后置附加元素，直接放多个输入框会出现排版错位、边框重复的问题，官方文档里也没提到这个用法。

• 不需要提取Bootstrap 4的完整样式，几行自定义CSS就能搞定
  最简便的方式是基于BS3现有组件，加一点Flex布局的自定义样式来模拟BS4的效果，不会和现有BS3样式冲突，代码也很轻量：

  先写HTML结构（和BS4的结构很像，只是用BS3的input-group-addon替代BS4的input-group-text）：

  <div class="input-group input-group-multi">
    <div class="input-group-addon">First and last name</div>
    <input type="text" class="form-control" placeholder="First name">
    <input type="text" class="form-control" placeholder="Last name">
  </div>
  

  然后添加自定义CSS：

  .input-group-multi {
    display: flex;
    align-items: stretch;
  }
  .input-group-multi .input-group-addon {
    flex-shrink: 0;
    border-right: 0;
  }
  .input-group-multi .form-control:first-child {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
  .input-group-multi .form-control:last-child {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  

  这段代码的作用是：用Flex让元素横向排列并高度对齐，调整边框去掉重复的线条，让整体样式和BS4的多输入组一致。

• 如果非要用BS4的原生样式（不推荐）
  也可以提取BS4中input-group涉及多输入框的相关CSS片段，但这样容易引入样式冲突，反而不如自定义CSS来得稳妥。

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