bootstrap-4 - 添加数据切换和数据目标会中断导航链接

Question

我的导航栏可以工作，但我希望它在单击链接时自动折叠。为此，我知道我必须添加data-toggle="collapse" data-target=".navbar-collapse"到 html 中的每个链接。不幸的是，这打破了链接，它确实崩溃了，但它不会在点击时滚动到它的目标。我没看到什么？

<nav class="navbar navbar-light bg-light fixed-top py-0">
    <a class="navbar-brand" href="#">The Studio</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-item nav-link active" href="#title_page">Home<span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" data-toggle="collapse" data-target=".navbar-collapse" href="#info">Information</a>
            <a class="nav-item nav-link" data-toggle="collapse" data-target=".navbar-collapse" href="#program_mobile" id="navlink_lessson_program">Program</a>
            <a class="nav-item nav-link" data-toggle="collapse" data-target=".navbar-collapse" href="#testimonials">Testimonials</a>
            <a class="nav-item nav-link" data-toggle="collapse" data-target=".navbar-collapse" href="#contact">Contact</a>
        </div>
    </div>
</nav>

标签： bootstrap-4

Answer 1

我似乎已经回答了我自己的问题。data-toggle 和 data-target 属性在链接中不能很好地工作，所以我在链接中放置了一个带有这些属性的链接，现在它可以按预期工作。

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top py-0">
    <a class="navbar-brand" href="#">The Modern Piano Studio</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-center" id="navbarNavAltMarkup">
        <div class="navbar-nav">
            <a class="nav-item nav-link active" href="#title_page"><span data-target=".navbar-collapse" data-toggle="collapse">Home</span><span class="sr-only">(current)</span></a>
            <a class="nav-item nav-link" href="#info"><span data-target=".navbar-collapse" data-toggle="collapse">Information</span></a>
            <a class="nav-item nav-link" href="#program_mobile" id="navlink_lessson_program"><span data-target=".navbar-collapse" data-toggle="collapse">Lesson Program</span></a>
            <a class="nav-item nav-link" href="#testimonials"><span data-target=".navbar-collapse" data-toggle="collapse">Testimonials</span></a>
            <a class="nav-item nav-link" href="#contact"><span data-target=".navbar-collapse" data-toggle="collapse">Contact</span></a>
        </div>
    </div>
</nav>