如何在Bootstrap 4的navbar中实现nav-item居中与另一nav-item右对齐

修改后的完整代码 #

<div class="container-fluid big-logo bg-light" id="big-logo">
    <nav class="navbar nav-pills flex-column justify-content-between flex-sm-row align-items-center navbar-expand-lg navbar-light bg-white">
        <a href="{% url 'home' %}" class="nav-item">
            <img alt="logo" src="{% static 'img/fuck.jpg' %}" style="max-height:40px;">
        </a>
        <a href="{% url 'cart' %}" class="nav-item position-relative">
            <div class="d-flex flex-column align-items-center">
                <div class="position-relative">
                    <img alt="cart" class="card-title" src="{% static 'img/cart.png' %}" style="max-height:30px;">
                    <span class='badge badge-warning position-absolute' style="top:-5px;right:-10px" id='lblCartCount'> {{ obj }} </span>
                </div>
                <h6 class="card-subtitle text-muted mt-1 mb-0">Cart</h6>
            </div>
        </a>
    </nav>
</div>

核心修改说明 #

• 替换nav原有的justify-content-center为justify-content-between，实现logo居左、购物车入口居右的两端对齐效果
• 给nav新增align-items-center属性，保证两个导航元素垂直方向居中对齐
• 调整购物车内部布局：用flex布局让图标、数量徽章、Cart文字垂直居中排列，同时给徽章加绝对定位，固定在购物车图标的右上角，避免挤压图标位置
• 保留了原有响应式逻辑，移动端下两个元素仍会堆叠居中展示

内容的提问来源于stack exchange，提问作者Arka-cell