如何在小设备中隐藏Logo？Bootstrap类使用问题求助

问题根源 #

1. HTML语法错误：你的<a>标签写了两个独立的class属性，浏览器只会识别最后一个，导致navbar-brand等核心样式丢失，这是操作后异常的主要原因之一。
2. 类的作用范围错误：把响应式类加到<a>标签会隐藏整个包含标题的容器，而你需要的只是隐藏Logo图片。

修复步骤 #

1. 合并<a>标签的class属性，确保所有样式类在同一个class属性中。
2. 将d-none d-md-block正确添加到<img>标签上，这样仅在小屏幕（<768px）隐藏Logo，大屏幕正常显示，同时保留标题部分。

修复后的代码 #

<header>
    <nav id="header-nav" class="navbar navbar-dark">
        <div class="container-fluid">
            <div class="d-flex flex-row">
                <a class="navbar-brand navbar" href="index.html">
                    <img src="images/19822_1_67_Thumb.png" alt="Logo image" class="d-none d-md-block">
                    <div class="d-flex flex-column p-2 pt-0 pb-0">
                        <h1 class="mb-1">David Chu's China Bristo</h1>
                        <p class="mb-1"><span><img src="images/star-k-logo.png" alt="Kosher certification"></span>Kosher Certified</p>
                    </div>
                </a>
            </div>
        </div>
    </nav>
</header>

额外排查点 #

如果添加类后仍未生效，可检查：

• Bootstrap是否正确引入（CSS文件需在自定义样式之前加载）。
• 确认当前设备尺寸是否符合Bootstrap的断点规则：md对应≥768px，小屏幕指<768px的设备。
• 若存在自定义样式冲突，可给img标签的类添加更高优先级，比如class="d-none d-md-block img-fluid"。

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