Question

我需要将我的另一个网页链接到我的图片导航菜单。例如：如果我点击我的图片菜单，它会打开google.com。

框架：bootstrap 4

div class="row row2">
        <div class="col-md-12">
            <ul class="nav nav-pills justify-content-center nav-justified" role="tablist">
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" href="#">About me</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" href="#">My pictures</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" href="#">My music</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" href="#">My files</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" href="#">My videos</a>
                </li>
            </ul>
        </div>
    </div>

Answer 1

这将有效：）

<div class="row row2">
        <div class="col-md-12">
            <ul class="nav nav-pills justify-content-center nav-justified" role="tablist">
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" href="#">About me</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" target="_blank" href="http://google.com">My pictures</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" href="#">My music</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" href="#">My files</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="pill" href="#">My videos</a>
                </li>
            </ul>
        </div>
    </div>

Answer 2

这是我的问题的正确代码。我在你的帮助下解决了这个问题三江源

<强> HTML

<div class="row row2">
        <div class="col-md-12">
            <ul class="nav nav-pills justify-content-center nav-justified" role="tablist">
                <li class="nav-item">
                    <a class="nav-link" href="about_me.html">About me</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="my_pictures.html">My pictures</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="my_music.html">My music</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="my_files.html">My files</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="my_videos.html">My videos</a>
                </li>
            </ul>
        </div>
    </div>

<强> CSS

    .active {
    background-color: #39a0c9 !important;
    color: #fff !important;
}

如何将外部或本地html doc链接提供给bootstrap nav-pills？

2 个答案: