在Bootstrap 5的页面布局开发中，实现搜索框与图标精准右对齐且控制宽度为50%是常见的前端布局需求，通过合理使用Bootstrap内置的Flex工具和宽度控制类就能快速完成适配。
实现思路分析
要实现搜索框右对齐且宽度为50%，核心是利用Bootstrap 5的Flex布局类控制容器对齐方式，同时通过宽度工具类限制搜索框整体宽度。图标和搜索框需要放在同一个Flex容器内，保证二者水平排列且整体靠右，再单独设置容器宽度为50%即可。
用到的核心Bootstrap类
d-flex：将元素设置为Flex布局容器justify-content-end：让Flex容器内的子元素靠右对齐w-50：设置元素宽度为父容器的50%form-control：Bootstrap默认的表单输入框样式类input-group：输入框组容器，用于组合输入框和附加元素input-group-text：输入框组的附加文本/图标容器样式
完整实现代码
以下是一个完整的示例，搜索框和搜索图标组合后整体靠右对齐，且总宽度占父容器的50%：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5搜索框右对齐示例</title>
<!-- 引入Bootstrap 5 CSS -->
<link href="https://cdn.ipipp.com/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入Bootstrap图标库 -->
<link rel="stylesheet" href="https://cdn.ipipp.com/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>
<body>
<div class="container mt-5">
<!-- 父容器，用于演示宽度占比 -->
<div class="border p-3">
<!-- 搜索框容器：Flex布局、靠右对齐、宽度50% -->
<div class="d-flex justify-content-end w-50">
<!-- 输入框组，组合搜索框和图标 -->
<div class="input-group">
<input type="text" class="form-control" placeholder="请输入搜索内容">
<span class="input-group-text">
<i class="bi bi-search"></i>
</span>
</div>
</div>
</div>
</div>
</body>
</html>
代码逻辑说明
外层container和带边框的父div仅用于演示布局范围，核心布局逻辑都在d-flex justify-content-end w-50这个div上：
d-flex让该div成为Flex容器，内部输入框组和图标可以水平排列justify-content-end让Flex容器内的子元素（输入框组）整体靠右对齐w-50限制这个Flex容器的宽度为父容器的50%，因此内部的搜索框整体宽度也会限制在50%范围内
输入框组内部的input-group-text用来包裹搜索图标，保证图标和输入框无缝衔接，视觉上是一个整体。
常见问题排查
如果实现后效果不符合预期，可以检查以下几点：
- 确认是否正确引入了Bootstrap 5的CSS文件，缺少样式会导致类不生效
- 检查
w-50是否加在了正确的Flex容器上，如果加在输入框组上，宽度计算会包含内边距，可能和预期有偏差 - 如果父容器本身有内边距或者宽度限制，需要调整父容器的样式，避免影响搜索框的宽度计算
注意：如果需要在小屏幕设备上调整宽度，可以给Flex容器添加响应式宽度类，比如w-75 w-md-50，表示在中等屏幕及以上宽度为50%，小屏幕宽度为75%。
Bootstrap_5搜索框右对齐搜索框宽度控制图标对齐修改时间：2026-07-01 14:09:28