Question

似乎没有办法让默认<li>元素显示在Bootstrap-4导航菜单中。

我同时拥有Bootstrap css参考以及对节点jquery.min.js和bootstrap.min.js的参考。

此示例：https://codepen.io/jek/pen/BoWNRy很完美。这是我从中得到示例的地方。

<head>
    <title>KR-DevTools</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>

<body>

    <p></p>
    <div class='container border shadow'>
        <div class=""><h1>KR-DevTools</h1></div>
    </div>
    <p></p>
    <div class='container border border-top-0 shadow'>

        <ul class="nav nav-tabs bordered">
            <li class="nav-item active"><a class="nav-link" data-toggle="tab" href="#home">Session Variables</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu3">Menu 3</a></li>
        </ul>
        <div class="tab-content">
            <div id="home" class="tab-pane fade in active">
                <h3>Menu 1</h3>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>

            <div id="menu1" class="tab-pane fade">
                <h3>Menu 1</h3>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div id="menu2" class="tab-pane fade">
                <h3>Menu 2</h3>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
            </div>
            <div id="menu3" class="tab-pane fade">
                <h3>Menu 3</h3>
                <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
            </div>
        </div>

    </div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

第一个列表项元素调用正确的Bootstrap-4类afaik，即<li class="nav-item active">。第一项旨在显示在页面加载中，但没有显示。

Answer 1

两件事：

在您的代码中，您有<li class="nav-item active">。相反，您应该使用以下链接在链接本身上创建活动类：<a class="nav-link active" data-toggle="tab" href="#home">Session Variables</a></li>

第二，将<div id="home" class="tab-pane fade in active">更改为<div id="home" class="tab-pane fade in show active">。

进行这些更改应会为您提供所需的结果。

活动<nav>项目未显示在页面加载中

1 个答案: