Кажется, я никак не могу заставить элемент <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">. Первый элемент должен отображаться при загрузке страницы, но это не так.