Bootstrap如何实现小尺寸屏幕下页面控件规整显示适配？

问题现象 #

使用Bootstrap两列栅格开发表单时，大屏幕下标签、输入框排列规整，手机等小屏设备下控件尺寸错位、显示错乱，无法保持多端一致的显示效果。

问题复现代码 #

<div class="input-group col-sm-10">
  <span class="input-group-addon col-sm-4 text-right border">.$s['Surname'].</span>
  <input id="msg" type="text" class="form-control col-sm-6" name="msg" placeholder="Enter Marks">
</div>

问题根因 #

• 栅格类使用不符合Bootstrap规范：直接将col-sm-*类绑定在input-group、input-group-addon、form-control等组件元素上，会破坏组件内置的布局规则
• 断点覆盖不全：col-sm-*类仅在屏幕宽度≥768px时生效，小于该宽度的小屏设备下元素默认按100%宽度块级渲染，没有对应的布局规则约束就会出现错位

修复方法 #

• 调整DOM结构：栅格类统一放在独立的包裹层元素上，input-group、输入控件、前缀标签本身不要直接加栅格类，外层套row容器保证栅格边距计算正常
• 按需配置断点类：
  • 如果需要小屏下也保持「标签+输入框」左右并排的布局，使用超小屏断点类col-xs-*（Bootstrap3）/col-*（Bootstrap4及以上版本）替换原有col-sm-*类
  • 如果接受小屏下标签、输入框上下堆叠的展示形式，只需要移除组件元素上的栅格类，保留外层包裹层的col-sm-*类即可，组件本身的默认布局会自动适配

修复后参考代码（全尺寸左右并排布局） #

<div class="row">
  <div class="col-xs-10">
    <div class="input-group">
      <span class="input-group-addon col-xs-4 text-right border">.$s['Surname'].</span>
      <input id="msg" type="text" class="form-control" name="msg" placeholder="Enter Marks">
    </div>
  </div>
</div>

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