为什么选项卡在Bootstrap 4.0.0中不起作用 [英] why tabs not working in bootstrap 4.0.0
问题描述
使用引导程序标签控件.它在引导程序3.3.7中正确显示 https://jsfiddle.net/steve_richter/evn2ncbo/7/
using the bootstrap tabs control. It displays correctly in bootstrap 3.3.7 https://jsfiddle.net/steve_richter/evn2ncbo/7/
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tabs</h3>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
<br>
<p><strong>Note:</strong> This example shows how to create a basic navigation tab. It is not toggleable/dynamic yet (you can't click on the links to display different content)- see the last example in the Bootstrap Tabs and Pills Tutorial to find out how this can be done.</p>
</div>
</body>
</html>
但在引导程序4.0.0中不正确 https://jsfiddle.net/steve_richter/evn2ncbo/1/
but incorrectly in bootstrap 4.0.0 https://jsfiddle.net/steve_richter/evn2ncbo/1/
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tabs</h3>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
<br>
<p><strong>Note:</strong> This example shows how to create a basic navigation tab. It is not toggleable/dynamic yet (you can't click on the links to display different content)- see the last example in the Bootstrap Tabs and Pills Tutorial to find out how this can be done.</p>
</div>
</body>
</html>
为什么较旧的版本可以正常运行，而不是当前版本?
Why would the older version work and not the current one?
谢谢
推荐答案
在Bootstrap 4中，您的<a>元素需要nav-link类，以便选项卡正确显示.理想情况下，还应该为您的<li>元素赋予nav-item类.最后，您的active类应该放在<a>标记上，而不是<li>标记上.
In Bootstrap 4, your <a> elements need the nav-link class in order for the tabs to show up correctly. Ideally your <li> elements should also be given the nav-item class. Finally, your active class should go on the <a> tag, not the <li> tag.
这是一个可行的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tabs</h3>
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu 1</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu 2</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu 3</a></li>
</ul>
<br>
<p><strong>Note:</strong> This example shows how to create a basic navigation tab. It is not toggleable/dynamic yet (you can't click on the links to display different content)- see the last example in the Bootstrap Tabs and Pills Tutorial to find out how this can be done.</p>
</div>
</body>
</html>
更多示例可在 官方文档中找到.
More examples can be found in the official documentation.
这篇关于为什么选项卡在Bootstrap 4.0.0中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
