iPhone上form-control类致日期输入框异常，是否为Bug？

在iPhone设备的Safari和Chrome浏览器中，为type="date"的input元素添加Bootstrap的form-control类会导致显示异常，对比不加该类的正常状态，这是明显的iOS平台兼容性问题。

测试代码：

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
  <div class="container">
    <p>With FC: <input type="date" name="BookingStart" class="form-control w-auto d-inline ms-5"></p>

    <p>Without FC: <input type="date" name="BookingStart" class="w-auto d-inline ms-5"></p>
  </div>
</body>

这属于Bootstrap样式与iOS原生date输入控件的兼容性冲突，并非你代码的错误，通过简单的样式调整即可修复：

修复方案 #

1. 覆盖冲突样式
   针对iOS设备单独调整form-control的内边距和高度，避免破坏原生控件布局：

   @supports (-webkit-touch-callout: none) {
     input[type="date"].form-control {
       padding: 0.25rem 0.5rem;
       height: auto;
       line-height: 1.5;
     }
   }
   

2. 使用小尺寸控件类
   改用Bootstrap的form-control-sm替代默认form-control，减少控件的内边距和高度，适配iOS原生控件：

   <input type="date" name="BookingStart" class="form-control-sm w-auto d-inline ms-5">
   

原因说明 #

iOS的原生date输入控件有固定的内置布局和样式，Bootstrap的form-control类默认的padding、height属性会与原生控件的样式规则冲突，导致显示错位。通过调整这些属性，就能让控件恢复正常显示。

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