<button>在Bootstrap4中无法识别</button>
[英]<button> not recognized in Bootstrap4
问题描述
I'm trying to achieve a 'collapse icon' that's floated left followed by Copyright © using Bootstrap4. 
我正在尝试实现一个“折叠图标”，该图标向左浮动，然后使用Bootstrap4进行版权和复制。
I've seen other questions about this topic but none seem to actually answer the question. 我还看到了有关此主题的其他问题，但似乎没有一个人真正回答该问题。 Other questions have different code with obvious typos, my code doesn't. 其他问题的代码有明显的错别字，我的代码没有。 Why is it that data-toggle & data-target aren't recognized when you do include all the dependencies? 当您包含所有依赖项时，为什么不能识别数据切换和数据目标？
.titleText{ font-size:230%; color:green; font-weight:heavy; letter-spacing:1px; }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <nav class="navbar-nav navbar-expand-sm navbar-fixed-top text-success"> <a class="navbar-brand titleText">Copyright © </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapseNavBar"> <span class="navbar-toggler-icon"></span> </button> <div="collapse navbar-collapse" id="collapseNavBar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="link-nav" href="#">Map</a> </li> <li class="nav-item"> <a class="link-nav" href="#">Cart</a> </li> </ul> </div> </nav> </div> </body> </html>
The button isn't showing up, just the map & cart text. 该按钮没有显示，仅显示地图和购物车文本。 If you have a workaround I would appreciate a vanilla JS solution apposed to JQuery, since I'm not that experienced with JQuery and would rather use Javascript. 如果您有解决方法，那么我会欣赏适用于JQuery的通用JS解决方案，因为我对JQuery并不了解，而是希望使用Javascript。 Button 按键
3 个解决方案
解决方案1
2 2019-01-08 18:47:48
Fixed the typo and updated HTML to show collapsible navBar 修复了错字并更新了HTML以显示可折叠的navBar
.titleText{ font-size:230%; color:green; font-weight:heavy; letter-spacing:1px; }
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <nav class="navbar navbar-expand-lg navbar-light bg-light navbar-fixed-top text-success"> <a class="navbar-brand titleText">Copyright © </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapseNavBar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapseNavBar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="link-nav" href="#">Map</a> </li> <li class="nav-item"> <a class="link-nav" href="#">Cart</a> </li> </ul> </div> </nav> </div> </body> </html>
解决方案2
1 2019-01-08 18:45:15
I have made some typo corrections, the toggle functionality now works with this code. 我做了一些错字更正，切换功能现在可以与此代码一起使用。 But additional modifications are needed to align the elements correctly. 但是需要进行其他修改才能正确对齐元素。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- jQuery library -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> .
</script>
<!-- Popper JS -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
> </script>
<!-- Latest compiled JavaScript -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> .
</script>
<style>
.titleText{
font-size:230%;
color:green;
font-weight:heavy;
letter-spacing:1px;
}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-fixed-top text-success">
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#collapseNavBar">
<span class="navbar-toggler-icon">Menu</span>
</button>
<div class="collapse navbar-collapse" id="collapseNavBar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="link-nav" href="#">Map</a>
</li>
<li class="nav-item">
<a class="link-nav" href="#">Cart</a>
</li>
</ul>
</div>
<a class="navbar-brand titleText">Copyright © </a>
</nav>
</div>
</body>
</html>
I will construct the complete aligned html if need be. 如果需要，我将构建完整的对齐html。 Hope this helps! 希望这可以帮助！
解决方案3
1 已采纳 2019-01-08 18:54:36
if you use class text-success in your code, so you cant see navigation bar background-color and default link color so i replace text-sucesss to navbar-light bg-light . 如果在代码中使用class text-success ，则无法看到导航栏的background-color和默认链接颜色，因此我将text-sucesss替换为navbar-light bg-light 。
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <nav class="navbar navbar-expand-lg navbar-fixed-top navbar-light bg-light"> <a class="navbar-brand titleText">Copyright © </a> <button class="navbar-toggler" data-toggle="collapse" data-target="#collapseNavBar" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapseNavBar"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Map</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Cart</a> </li> </ul> </div> </nav> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.