Bootstrap 5.0.2导航栏搜索框移至末尾且宽度设为50%的实现

问题根源 #

1. 导航栏错误添加了row类，干扰了Bootstrap原生的flex布局逻辑
2. 表单id书写错误（带#），导致CSS选择器无法生效
3. 搜索框宽度设置与表单布局配合不当，无法同时满足50%宽度和靠右对齐的需求

解决步骤 #

1. 移除导航栏的row类：Bootstrap的navbar本身是flex容器，row类会引入额外的margin和padding，破坏原有布局
2. 修正表单id：将id="#searchform"改为id="searchform"，确保CSS能正确选中元素
3. 调整表单flex布局：给表单添加flex-grow-1（让表单占据导航栏剩余空间）和justify-content-end（让内部元素靠右对齐）
4. 设置搜索框宽度：通过自定义CSS类设置搜索框宽度为50%，替代inline style

修改后的完整代码 #

CSS代码

.Banner {
  width: 100%;
  height: 75%;
  position: fixed;
  background-image: url(/NavBar/Img.png);
  background-size: cover;
  background-position: center;
}

.icon-white {
  color: white;
  font-size: 20px;
  cursor: pointer;
}

.cont:hover .cube {
  color: black;
}

/* 自定义搜索框宽度 */
#searchform .form-control {
  width: 50%;
}

HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Linux Coder</title>

  <link rel="stylesheet" href="/style.css">

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

  <!-- Bootstrap Icons -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">
</head>

<body>
  <!-- container -->
  <div class="container-fluid bg-dark" style="height: 1000px;">

    <!-- navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Linux Coder</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">HOME</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">ABOUT</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">BLOGS</a>
            </li>
          </ul>
          <form id="searchform" class="d-flex flex-grow-1 justify-content-end">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-light cont" type="submit"><i class="cube bi bi-search icon-white"></i></button>
          </form>
        </div>
      </div>
    </nav>
    <hr style="color: white; margin: 0;">

    <!-- javascript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>

</html>

关键说明 #

• flex-grow-1：让表单占据导航栏中菜单列表之外的所有剩余空间，确保有足够宽度容纳50%的搜索框
• justify-content-end：强制表单内部的搜索框和按钮靠右对齐，实现“导航栏末尾”的布局效果
• #searchform .form-control：通过高优先级选择器设置搜索框宽度，避免使用!important破坏样式优先级

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