Bootstrap输入表单标签与输入框连接处出现异常圆角问题

问题根源是你使用了Bootstrap 5已废弃的input-group-prepend类。这个类在Bootstrap 4中是必填结构，但Bootstrap 5已经移除了该嵌套要求，多余的容器会导致样式冲突，进而出现连接处的异常圆角。

修正后的代码：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="input-group mb-3">
    <span class="input-group-text" id="basic-addon1">Zeitpunkt des Aufhörens</span>
    <input type="date" class="form-control" aria-describedby="basic-addon1">
</div>

另外建议在Astro的全局布局文件（如Layout.astro）中统一引入Bootstrap CSS，避免组件内重复引入引发样式优先级问题，但本次异常的核心原因还是废弃类的误用。

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