Bootstrap 5+Razor Pages：带箭头按钮的浮动DateTime输入组样式咨询

我不是Bootstrap/CSS专家，想用Bootstrap 5和Razor Pages做一个带左侧箭头按钮的DateTime输入框，试了两种方案都有问题，目标是实现包含DateTime选择框和左侧箭头按钮的输入组。

尝试的方案及问题 #

方案1：按钮与浮动容器高度不一致 #

<div class="input-group mb-3">
  <div class="input-group-prepend">
   <button class="btn btn-outline-secondary" type="button"><<</button>
  </div>
  <div class="form-floating">
   <input class="form-control" asp-for="startTime" asp-format="{0:yyyy-MM-ddTHH:mm}" />
   <label for="startTime">Start Time</label>
  </div>
</div>

问题：按钮高度和form-floating容器不匹配，视觉上不协调。

方案2：浮动容器边框切割输入框 #

<div class="form-floating">
  <div class="form-control" id="datetime_wrap">
   <div class="input-group mb-3">
    <div class="input-group-prepend">
     <button class="btn btn-outline-secondary" type="button"><<</button>
    </div>
    <input class="form-control" asp-for="startTime" asp-format="{0:yyyy-MM-ddTHH:mm}" />
   </div>
  </div>
  <label for="datetime_wrap">Start Time</label>
</div>

问题：浮动容器的边框会切割内部输入框，导致显示异常。

解决方法：原生Bootstrap结构调整+少量自定义CSS #

可以通过调整Bootstrap原生类的组合实现需求，不需要复杂的自定义样式，具体如下：

最终实现代码 #

<div class="form-floating">
  <div class="input-group h-100">
    <button class="btn btn-outline-secondary rounded-start-0" type="button"><<</button>
    <input class="form-control border-start-0" asp-for="startTime" asp-format="{0:yyyy-MM-ddTHH:mm}" />
  </div>
  <label for="startTime">Start Time</label>
</div>

关键调整说明 #

• h-100让input-group撑满form-floating的高度，保证按钮和输入框高度完全对齐；
• rounded-start-0去掉按钮左侧的圆角，让它和输入框的边框衔接更自然；
• border-start-0去掉输入框左侧的边框，避免和按钮边框重叠出现双层边框；
• 直接将input-group作为form-floating的子元素，无需额外嵌套form-control容器，确保浮动标签定位正常。

如果想要按钮和输入框的边框完全融合，可添加一行自定义CSS优化：

.form-floating .input-group .btn {
  border-right: none;
}

这会去掉按钮右侧的边框，让整体视觉上更像一个统一的输入组件。

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