bootstrap 4 导航栏导航选项卡 [英] bootstrap 4 navbar to navigate tabs
问题描述
在引导程序 4 中,我尝试使用固定的底部导航栏,当单击链接时,所使用的内容来自 4 个选项卡.回到引导程序的早期,我所做的工作但试图让它与 4 一起工作对我不起作用.有人能指出我在这里缺少的东西的正确方向吗?
<html lang="zh-cn"><头><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no"><meta name="description" content=""><meta name="author" content=""><link rel="icon" href="../../../../favicon.ico"><title>Bootstrap 的启动模板</title><!-- Bootstrap 核心 CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcFAgWiGinAmAmFcFAGORIGINSIGINX"><!-- 此模板的自定义样式--><style type="text/css">身体 {填充顶部:5rem;}.starter-template {填充:3rem 1.5rem;文本对齐:居中;}</风格>头部><身体><nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-bottom"><a class="navbar-brand" href="#">title</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle导航"><span class="navbar-toggler-icon"></span>按钮><div class="collapse navbar-collapse" id="navbarsExampleDefault"><ul class="navbar-nav mr-auto"><li class="nav-item active"><a class="nav-link" href="#tab1">test1</a><li class="nav-item"><a class="nav-link" href="#tab2" data-toggle="tab">test2</a><li class="nav-item"><a class="nav-link" href="#tab3" data-toggle="tab">test3</a><li class="nav-item"><a class="nav-link" href="#tab4" data-toggle="tab">test4</a>
</nav><main role="main" class="container"><h2>标题</h2><div class="tab-content"><div class="tab-pane active" id="tab1"><h4>test1</h4>选项卡1
<div class="tab-pane" id="tab2"><h4>test2</h4>选项卡2
<div class="tab-pane" id="tab3"><h4>test3</h4>选项卡3
<div class="tab-pane" id="tab4"><h4>test4</h4>