Bootstrap导航栏右侧布局及购物车图标显示问题求助

问题1：SIGN IN和CART无法右侧对齐且保持响应式 #

原代码核心问题是把右侧导航嵌套在了左侧navbar-nav列表里，再加上手动添加的position:relative硬偏移，直接破坏了Bootstrap的flex布局逻辑，导致响应式失效。

修复思路 #

把右侧导航容器从左侧navbar-nav中移出，放在collapse navbar-collapse容器内，利用Bootstrap自带的ms-auto类实现自动右对齐，完全保留响应式特性。

问题2：购物车图标无法显示 #

Glyphicon是Bootstrap 3的内置图标，Bootstrap 5已移除该图标库。你已经引入了Font Awesome，直接用Font Awesome的购物车图标替换即可。

修改后的完整HTML代码 #

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<head>
    <title>Ecommerce</title>
    {% load static %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
      crossorigin="anonymous">
    <link rel="stylesheet"
          href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <link rel="stylesheet" type="text/css" href="{% static 'store/styles.css' %}" />
</head>

<body>

<nav class="navbar navbar-expand-md navbar-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Jumaz</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="#"><i class="fa fa-fw fa-home"></i>Home</a>
                </li>
                <li class="nav-item d-flex align-items-center">
                    <form id="search" method="get" class="d-flex w-100" action="#">
                    <input id="input" class="form-control me-2" type="text" placeholder="Search products" aria-label="Search">
                    <button class="btn btn-warning text-light" type="submit">SEARCH</button>
                    </form>
                </li>
            </ul>
            <!-- 右侧导航：ms-auto实现自动右对齐 -->
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a href="#" class="btn btn-warning">SIGN IN</a>
                </li>
                <li class="nav-item ms-2">
                    <!-- 替换为Font Awesome购物车图标 -->
                    <a href="#" class="btn btn-warning"><i class="fa fa-shopping-cart" aria-hidden="true"></i>CART</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
        crossorigin="anonymous">
</script>

{% block body %}

{% endblock body %}

</body>
</html>

修改后的styles.css代码 #

去掉破坏响应式的硬偏移样式，调整搜索框适配不同屏幕：

#input{
    /* 用flex-grow-1让搜索框自动填充可用空间，替代固定宽度 */
    flex-grow: 1;
    border: 1px solid #555;
    padding: 9px 4px 9px 40px;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 13px center;
}

li.nav-item { 
    margin-left: 15px;
}

关键修改点说明 #

1. 右侧导航作为独立navbar-nav存在，添加ms-auto类自动右对齐，完全兼容Bootstrap的响应式折叠逻辑。
2. 搜索框用flex-grow:1替代固定宽度500px，小屏幕上会自动收缩避免溢出。
3. 用Font Awesome的fa-shopping-cart图标替换Bootstrap 3的Glyphicon，匹配已引入的图标库。
4. 移除#moveRight的硬定位样式，避免破坏布局。

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