rvc*_*rvc 4 twitter-bootstrap twitter-bootstrap-3
<body>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Products</a>
<ul class="dropdown-menu">
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</body>
这是正文部分中的代码。你们能帮我弄清楚出了什么问题吗？我无法看到水平选项卡中的内容:(
首先，您要在使用v4 CSS 文件的同时混合v3标记。它们不可互换，所以这是一个问题。
无论您使用的是哪个版本，您还需要应用data-toggle="tab"到每个标签。根据您实际使用的版本a查看文档的结构。li
Bootstrap v3 示例：请参阅选项卡标记和导航选项卡
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a>
</li>
<li role="presentation" class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Products</a>
<ul class="dropdown-menu">
<li><a href="#one" role="tab" data-toggle="tab">One</a>
</li>
<li><a href="#two" role="tab" data-toggle="tab">Two</a>
</li>
<li><a href="#three" role="tab" data-toggle="tab">Three</a>
</li>
</ul>
</li>
<li role="presentation"><a href="#contact" role="tab" data-toggle="tab">Contact</a>
</li>
</ul>
<div class="container-fluid">
<div class="tab-content">
<div id="home" role="tabpanel" class="tab-pane fade in active">
<div class="alert alert-info">Home</div>
</div>
<div id="one" role="tabpanel" class="tab-pane fade">
<div class="alert alert-info">One</div>
</div>
<div id="two" role="tabpanel" class="tab-pane fade">
<div class="alert alert-info">Two</div>
</div>
<div id="three" role="tabpanel" class="tab-pane fade">
<div class="alert alert-info">Three</div>
</div>
<div id="contact" role="tabpanel" class="tab-pane fade">
<div class="alert alert-info">Contact</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>Bootstrap v4 示例：参见导航
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-toggle="tab" href="#one">One</a>
<a class="dropdown-item" data-toggle="tab" href="#two">Two</a>
<a class="dropdown-item" data-toggle="tab" href="#three">Three</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#contact">Contact</a>
</li>
</ul>
<div class="container-fluid">
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home">
<div class="alert alert-info">Home</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="one">
<div class="alert alert-info">One</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="two">
<div class="alert alert-info">Two</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="three">
<div class="alert alert-info">Three</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="contact">
<div class="alert alert-info">Contact</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.4/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js"></script>