如何在Bootstrap 5中将日期图标放置在日期选择器输入框右侧

问题原因 #

出现这个问题是两个核心原因导致：

• Bootstrap 5 已完全废弃 Bootstrap 3 中的input-group-addon类，原附加元素类名已替换为input-group-text
• DOM结构不符合Bootstrap 5输入框组的规范：你把输入框和图标都放在了内层.date容器中，同时input-group容器内还包含了label元素，破坏了输入框组的弹性布局，导致图标换行到输入框下方。

原效果示意图：

修复方案 #

调整对应区块的代码结构即可，修改后的完整代码如下：

<form data-toggle="validator" class="container-fluid" role="form" id="gymUpdateForm">
    <div class="col-lg-12 col-md-12 col-sm-12 col-12 beta container-fluid">
    
        <div class="row">
            <div class="col-lg-8 col-md-8 col-sm-7 col-12">
                <div class="row">
                    <label class="control-label control-label-left col-lg-3 col-md-3 col-sm-5 col-12" for="updateDescription">Description:<span class="req"> *</span></label>
                    <div class="controls col-lg-6 col-md-7 col-sm-7 col-12">
                        <input type="text" id="updateDescription" name="updateDescription" placeholder="Description" class="form-control">
                    </div>
                </div>
            </div>
        
            <div class="col-lg-3 col-md-3 col-sm-4 col-6">
                <div class="row align-items-center">
                    <label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-4" for="updateArchive">Archived:</label>
                    <div class="col-lg-8 col-md-8 col-sm-8 col-8">
                        <div class="input-group date" id="datepicker1">
                            <input type="text" class="form-control fullWidth" id="updateArchive" name="updateArchive" placeholder="DD/MM/YYYY">
                            <span class="input-group-text" style="background-color:#ddd;">
                                <i class="fa fa-calendar" style="padding:5px;"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="container mt-3">                 
            <button type="submit" id="updateGym" class="btn btn-lg btn-warning" >Update</button>
            <button type="button" id="cancelGym" class="btn btn-lg btn-warning ms-2" >Return</button>
        </div>

    </div>
</form>

关键修改点说明 #

• 将label从input-group中移出，用栅格+align-items-center实现标签和输入框组垂直对齐
• 把input-group-addon替换为input-group-text适配Bootstrap 5 样式规范
• 额外给描述输入框添加了form-control类、给按钮添加了Bootstrap 5 原生的间距类mt-3、ms-2优化样式，替换了已废弃的btn-large为btn-lg

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