Android移动端Bootstrap5粘性导航栏换行问题求助

问题背景 #

运营tharuvi.com网站时，采用Bootstrap5与jQuery开发的sticky-top导航栏在桌面端及iPhone设备显示正常，但在小屏Android设备中，菜单按钮与搜索框会折成两行，缩小搜索框宽度也无法解决。

修复方案 #

以下是针对性的修改步骤，确保小屏设备上菜单与搜索框保持单行：

1. 重构Flex容器结构，强制元素同行
   将菜单按钮与搜索框包裹在同一个d-flex align-items-center flex-nowrap容器内，利用Bootstrap的Flex工具类强制元素不换行：

<nav class="navbar navbar-expand-md p-0 sticky-top ps-0 bg-body-tertiary" style="background-color:#FAFAFA">
  <div class="container-fluid px-0">
    <!-- 新增包裹容器，强制元素同行 -->
    <div class="d-flex align-items-center flex-nowrap">
      <div class="btn-group pe-1">
        <button class="btn btn-success-outline btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="false" aria-expanded="true">
          <b>MENU</b>
        </button>
        <!-- 下拉菜单原有内容保持不变 -->
      </div>

      <form class="d-flex flex-grow-1 ps-0 pe-0" method="get" action="{% url 'search-name' %}">
        <input class="form-control reduceboxsize flex-grow-1" value="{{ query }}" name="q" type="search" placeholder="Search" id="snametag" aria-label="Search">
        <button class="btn btn-outline-success" name="st" value="{{st.url}}" type="submit">&#x1F50D;</button>
      </form>
    </div>

    <!-- 导航栏切换按钮与折叠菜单保持不变 -->
    <button class="navbar-toggler btn btn-sm ps-0" 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">
      <!-- 原有导航项内容保持不变 -->
    </div>
  </div>
</nav>

2. 添加小屏适配的自定义CSS
   针对小屏设备（宽度≤767px），添加CSS确保元素不换行并合理分配空间：

@media (max-width: 767px) {
  /* 强制容器不换行 */
  .navbar .flex-nowrap {
    flex-wrap: nowrap !important;
  }
  /* 避免form容器因内部元素溢出换行 */
  .navbar form.d-flex {
    min-width: 0;
  }
  /* 设置搜索框最小宽度，防止过度压缩 */
  .navbar .form-control.reduceboxsize {
    min-width: 120px;
    flex-shrink: 1;
  }
}

3. 可选：调整导航栏展开断点
   如果默认的navbar-expand-md（768px）断点不符合小屏Android设备的视口，可以改为navbar-expand-sm（576px），让导航栏在更小屏幕下保持展开状态：

<nav class="navbar navbar-expand-sm p-0 sticky-top ps-0 bg-body-tertiary" style="background-color:#FAFAFA">

原理说明 #

通过Bootstrap的Flex工具类强制元素在同一行，结合媒体查询针对小屏设备优化布局，避免因视口宽度差异、元素间距导致的换行问题；同时通过flex-grow属性合理分配搜索框的可用宽度，既保证显示完整，又不会挤占菜单按钮的空间。

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