在Bootstrap导航栏的开发场景中，将搜索栏固定在最右侧是提升页面交互体验的常见需求，不同版本的Bootstrap框架提供了不同的实现思路，开发者可以根据项目实际使用的版本选择合适的方法。
Bootstrap 5 实现方案
Bootstrap 5 基于flex布局设计，提供了ms-auto工具类，用于设置元素的左外边距为auto，从而实现元素靠右排列的效果，这是最简便的实现方式。
完整代码示例
<!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>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">网站名称</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">分类</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">关于我们</a>
</li>
</ul>
<!-- 搜索栏添加ms-auto类实现靠右 -->
<form class="d-flex ms-auto" role="search">
<input class="form-control me-2" type="search" placeholder="输入搜索内容" aria-label="搜索">
<button class="btn btn-outline-success" type="submit">搜索</button>
</form>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
代码说明
上述代码中，搜索栏所在的form标签添加了ms-auto类，在flex布局的容器中，该样式会将搜索栏推到容器的最右侧。如果导航栏内有其他靠右的元素，也可以调整ms-auto的添加位置，控制元素的排列顺序。
Bootstrap 4 实现方案
Bootstrap 4 同样基于flex布局，但对应的外边距工具类是ml-auto，作用与Bootstrap 5的ms-auto一致，只是类名不同。
完整代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 导航栏搜索栏右侧定位</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">网站名称</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">分类</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">关于我们</a>
</li>
</ul>
<!-- 搜索栏添加ml-auto类实现靠右 -->
<form class="form-inline my-2 my-lg-0 ml-auto">
<input class="form-control mr-sm-2" type="search" placeholder="输入搜索内容" aria-label="搜索">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
</form>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
自定义CSS实现方案
如果项目中对样式有更灵活的控制需求，也可以不使用Bootstrap内置工具类，通过自定义CSS实现搜索栏靠右定位，这种方式适配所有版本的Bootstrap。
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义CSS实现搜索栏右侧定位</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* 自定义搜索栏定位样式 */
.search-right {
margin-left: auto;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">网站名称</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">分类</a>
</li>
</ul>
<form class="d-flex search-right" role="search">
<input class="form-control me-2" type="search" placeholder="输入搜索内容" aria-label="搜索">
<button class="btn btn-outline-success" type="submit">搜索</button>
</form>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
注意事项
- 确保搜索栏的父容器是flex布局容器，Bootstrap导航栏的
navbar-collapse类默认开启了flex布局，无需额外设置。 - 如果导航栏在移动端折叠后搜索栏位置异常，可以检查折叠容器的样式是否影响了flex布局的排列规则。
- 自定义CSS方案需要注意样式的优先级，避免被Bootstrap默认样式覆盖，可以适当提高选择器的优先级。