Bootstrap stretched-link在自定义元素上的使用问题及正确实现方法

你的问题出在用div嵌套a标签的结构上，虽然给父div加了position-relative，但stretched-link的覆盖逻辑在这种flex嵌套布局下容易出现点击区域不全的问题，而且语义上也没必要多一层冗余div。

正确的实现方式是直接把a标签作为menu-button的容器，利用Bootstrap的类让它成为flex容器并占满可用空间，这样整个区域自然可点击，无需额外依赖stretched-link的嵌套覆盖逻辑。

修改后的代码如下：

import {BsHouseDoor} from 'react-icons/bs';

const Menu = () => {
    return (
        <div className="menu container-fluid">
            <div className="row h-100">
                <div className="col-4">
                    <div className="d-flex align-items-center h-100 pl-3">
                        <BsHouseDoor className="logo-icon"/>
                        <span className="logo-title ml-3">Some name</span>
                    </div>
                </div>
                <div className="col-5">
                    <div className="d-flex justify-content-around h-100">
                        <a href="#" className="menu-button d-flex w-100 justify-content-center align-items-center">
                            Home
                        </a>
                        <a href="#" className="menu-button d-flex w-100 justify-content-center align-items-center">
                            About
                        </a>
                        <a href="#" className="menu-button d-flex w-100 justify-content-center align-items-center">
                            Contact
                        </a>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Menu;

关键说明： #

• 直接将a标签作为flex容器，通过d-flex、w-100等类让它占满父容器宽度并居中内容，整个a标签区域都会成为可点击范围，逻辑更直观。
• 如果一定要保留stretched-link的用法（比如父容器必须是div的场景），需确保父div是position-relative，且内部没有其他带position: relative/absolute的子元素干扰，但用a作为容器是更简洁合理的方案。

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