如何在iPad Air上调整Bootstrap列布局实现换行并保持桌面端平分宽度？

你当前使用的col-md是自动分配宽度的类，容易因内容差异导致iPad Air上显示异常。要同时满足桌面端两列各占一半、iPad Air上正常显示的需求，只需给列明确指定栅格宽度：

替换原有代码为：

<div class="container">
  <div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
  </div>
</div>

关键说明： #

• col-md-6 会让屏幕宽度≥768px时（包含iPad Air的横向1024px），每列占据Bootstrap栅格系统的6/12宽度，也就是刚好一半，完美匹配你的期望效果。
• 当屏幕宽度小于768px时，两列会自动垂直堆叠，适配手机等小屏设备。
• 如果需要在手机横屏（≥576px）也保持两列布局，可把col-md-6换成col-sm-6；要是仅想在桌面大屏（≥992px）才分两列，iPad Air上改为单列，就用col-lg-6。

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