Bootstrap导航栏移动端购物车图标与按钮无法横向对齐问题求助

问题根因 #

你使用的是Bootstrap的navbar-expand-lg配置，仅在屏幕宽度≥992px（lg断点）时导航栏才会横向展开，断点以下时.navbar-nav默认采用垂直flex布局，所以购物车图标和登录按钮会上下堆叠，同时你给logo、头像设置的固定150px左右边距在移动端窄屏场景下会进一步挤压导航栏空间，最终导致拉伸变形。
你设置inline-block无效的原因是.navbar-nav是flex容器，子元素的布局受flex规则控制，inline-block属性不会生效。

解决方案 #

1. 添加自定义CSS规则 #

在你的样式文件中加入以下代码，适配移动端布局：

/* lg断点以下的移动端适配 */
@media (max-width: 991.98px) {
  /* 让导航右侧元素组横向排列 */
  .navbar-nav {
    flex-direction: row !important;
    align-items: center;
    gap: 12px; /* 控制元素间距，可自行调整 */
  }
  /* 移除移动端不需要的固定边距，避免空间挤压 */
  .navbar-brand .logo-img {
    margin-left: 0 !important;
  }
  .dropdown img.nav-link {
    margin-right: 0 !important;
  }
  /* 可选：隐藏桌面端搜索框，移动端可单独做搜索入口 */
  .dekstop_search {
    display: none !important;
  }
}

2. 可选优化：添加折叠汉堡菜单 #

当前导航栏缺少移动端折叠功能，内容过多时仍会出现挤压，可按Bootstrap规范补充汉堡按钮与折叠容器：
首先在navbar-brand节点后插入汉堡按钮代码：

<button class="navbar-toggler bg-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

然后将原导航中除navbar-brand和汉堡按钮外的所有内容，包裹进折叠容器：

<div class="collapse navbar-collapse" id="navbarContent">
  <!-- 原搜索框、导航链接、登录/用户菜单的代码全部放在这里 -->
</div>

修改后小于lg断点时导航内容会自动折叠，点击汉堡按钮才会展开，完全避免导航栏拉伸问题。

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