如何将图标放置在密码输入框的最右侧？

先纠正一个基础问题：Bootstrap的网格列数最大为12，你代码里的col-md-13是无效的，需要改成col-md-12。下面提供两种可行的调整方案，帮你把图标放到输入框最右侧：

方案一：用Bootstrap原生组件实现（推荐） #

利用Bootstrap的input-group组件，能快速实现输入框与附加图标的对齐效果，代码调整如下：

<div class="row mb-3">
    <div class="col-md-12">
        <div class="input-group">
            <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" 
            name="password" required autocomplete="current-password" placeholder="Password">
            <span class="input-group-text">
                <i class="bi bi-eye-slash" id="togglePassword" style="cursor: pointer;"></i>
            </span>
            @error('password')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror       
        </div>
    </div>
</div>

关键调整点： #

• 用input-group包裹输入框和图标，这是Bootstrap官方推荐的输入框附加元素布局方式
• 把图标放入input-group-text容器中，自动与输入框高度匹配并对齐到右侧
• 给图标加cursor: pointer样式，提示用户这是可点击的交互元素

方案二：自定义CSS定位实现 #

如果不想依赖input-group组件，也可以通过绝对定位手动调整图标位置：

<div class="row mb-3">
    <div class="col-md-12 position-relative">
        <input id="password" type="password" class="form-control @error('password') is-invalid @enderror pe-5" 
        name="password" required autocomplete="current-password" placeholder="Password">
        <i class="bi bi-eye-slash position-absolute" id="togglePassword" style="right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer;"></i>
        @error('password')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror       
    </div>
</div>

关键调整点： #

• 给父容器col-md-12加position-relative，让图标可以基于它做绝对定位
• 给输入框加pe-5（右侧内边距），避免输入内容被图标遮挡
• 通过right:15px、top:50%+transform: translateY(-50%)让图标垂直居中并贴近输入框右侧

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