如何在Bootstrap 5中设置响应式布局？仅让Logo在md/lg设备显示

你的代码存在两个关键问题，导致无法实现预期需求：

• Bootstrap响应式显示类不能带前缀点（.d-none是CSS选择器写法，HTML的class属性需写d-none）
• 原类组合仅能让Logo在lg屏幕显示，不符合md和lg都显示的要求

修正后的完整代码 #

<body>
    <header>       
        <nav class="navbar navbar-expand-md navbar-light" style="background-color:#f6b319">
            <div class="container-fluid">
                <div class="navbar-header">
                    <!-- 正确的响应式类：隐藏xs/sm，显示md/lg，隐藏xl及以上 -->
                    <a href="index.html" class="float-start d-none d-md-block d-xl-none">
                        <div id="logo-img" alt="Logo image"></div>
                    </a>
                    <div class="navbar-brand">
                        <a href="index.html"><h1>Example 1</h1></a>
                            <p>
                                <img src="R.png" alt="Korsher certification">
                                <span>Kosher Certifield</span>
                            </p>
                    </div>
            </div>
        </nav>
    </header>   
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>

类组合逻辑说明 #

• d-none：默认在所有屏幕隐藏Logo
• d-md-block：从md尺寸（≥768px）开始显示Logo
• d-xl-none：到xl尺寸（≥1200px）及以上再次隐藏Logo

通过上述类组合，可严格实现仅在md和lg尺寸设备显示Logo，其他尺寸隐藏的需求。

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