如何让导航a标签的href适配两个Bootstrap响应式section？

方案1：通过JavaScript动态跳转 #

给移动端section添加唯一ID，监听导航链接的点击事件，根据当前屏幕宽度判断要滚动到对应元素。

修改代码如下：

<li class="nav-item">
    <a class="nav-link" href="#aboutus" onclick="return scrollToCorrectAboutUs()">About Us</a>
</li>

<section id="aboutus-mobile" class="aboutus d-block d-md-none text-dark mt-3 p-1 text-start" style="font-size:13px">
    <div class="container">
        <h3 class="text-muted fw-bold">About Us</h3><br />
        <p>
            <a class="text-decoration-none" asp-action="Index">AMRealEstate</a> is a group specialized in real estate market.
        </p>
    </div>
</section>
<section id="aboutus" class="aboutus text-light d-none d-md-block" style="font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif">
    <div class="row justify-content-center text-light align-items-center text-center p-5 m-5" style="border-radius:25px;border:solid 5px black;background-color:deepskyblue">
        <h1 class="text-white mt-3 p-3 text-light fw-bold">About Us</h1>
        <div class="col-lg-6 d-none d-lg-block">
            <img class="img-fluid" src="~/image/logolarge.png" width="700px" height="550px"/>
        </div>
        <div class="col col-lg-6 text-start p-5" style="border:solid 3px white;border-radius:30px">
            <p>
                <a class="text-decoration-none" asp-action="Index">AMRealEstate</a> is a group specialized in real estate market.
            </p>
        </div>
    </div>
</section>

<script>
function scrollToCorrectAboutUs() {
    // Bootstrap md断点为768px，小于该值判定为移动端
    const isMobile = window.innerWidth < 768;
    const targetId = isMobile ? 'aboutus-mobile' : 'aboutus';
    const targetElement = document.getElementById(targetId);
    
    if (targetElement) {
        targetElement.scrollIntoView({ behavior: 'smooth' });
        // 阻止默认锚点跳转行为
        return false;
    }
    return true;
}
</script>

方案2：合并section结构（更推荐） #

将两个section的内容整合到同一个带ID的section中，用Bootstrap响应式类控制内部模块的显示/隐藏，仅保留一个锚点目标，结构更简洁易维护。

修改后的代码示例：

<li class="nav-item">
    <a class="nav-link" href="#aboutus">About Us</a>
</li>

<section id="aboutus" class="aboutus mt-3">
    <!-- 移动端专属内容 -->
    <div class="d-block d-md-none text-dark p-1 text-start" style="font-size:13px">
        <div class="container">
            <h3 class="text-muted fw-bold">About Us</h3><br />
            <p>
                <a class="text-decoration-none" asp-action="Index">AMRealEstate</a> is a group specialized in real estate market.
            </p>
        </div>
    </div>

    <!-- 桌面端专属内容 -->
    <div class="d-none d-md-block text-light" style="font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif">
        <div class="row justify-content-center text-light align-items-center text-center p-5 m-5" style="border-radius:25px;border:solid 5px black;background-color:deepskyblue">
            <h1 class="text-white mt-3 p-3 text-light fw-bold">About Us</h1>
            <div class="col-lg-6 d-none d-lg-block">
                <img class="img-fluid" src="~/image/logolarge.png" width="700px" height="550px"/>
            </div>
            <div class="col col-lg-6 text-start p-5" style="border:solid 3px white;border-radius:30px">
                <p>
                    <a class="text-decoration-none" asp-action="Index">AMRealEstate</a> is a group specialized in real estate market.
                </p>
            </div>
        </div>
    </div>
</section>

方案说明 #

• 方案2完全依托Bootstrap响应式特性，无需额外JS，结构更符合前端最佳实践；
• 方案1适合无法大幅调整现有结构的场景，通过JS适配不同设备的跳转目标；
• 注意：HTML中ID必须唯一，绝对不能给多个元素设置相同ID，否则会导致锚点行为异常。

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