引导导航栏折叠图标的问题答案

【问题标题】：issue with bootstrap nav bar collapse icon引导导航栏折叠图标的问题
【发布时间】：2018-06-18 12:44:23
【问题描述】：

我正在创建一个引导网站并尝试使导航栏可折叠工作。无论如何都会显示导航切换按钮。当导航栏进入媒体时，如何限制它显示？

代码是：

enter code here

  </!DOCTYPE html>
     <html>
     <head>
     	<title>Bootstrap Website</title>
    		<link rel="stylesheet" href="css/styles.css" type="text/css">
		<!-- Latest compiled and minified CSS -->
	       	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

		  <!-- jQuery library -->
		   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
         </script>

		<!-- Latest compiled JavaScript -->
		  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
        </script>
		<!--mobile first -->
		  <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
     <body>

        	<div style="background-color: black;">
		    <nav class="navbar navbar-expand-md bg-dark navbar-dark">
			<div class="container">
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsenavbar">
					<span class="navbar-toggler-icon" style="background-color: black"></span>
				</button>
				<div class="collapse navbar-collapse text-center" id="collapsenavbar">
					<ul class="nav navbar-nav">
						<li class="nav-item">
							<a href="" class="nav-link">Home</a>
						</li>
						<li class="nav-item">
							<a href="" class="nav-link">The New Laws</a>
						</li>
						<li class="nav-item">
							<a href="" class="nav-link">Get Qualified</a>
						</li>
						<li class="nav-item">
							<a href="" class="nav-link">What Is Record Suspension</a>
						</li>
						<li class="nav-item">
							<a href="" class="nav-link">Why Do I Need A Waiver</a>
						</li>
					</ul>
	   			</div>
	   		</div>
	      	</nav>
	       </div>

</body>
</html>

【问题讨论】：

代码引用了 Bootstrap 3，所以 Bootstrap 4 导航栏不起作用

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

您使用引导程序 4 的导航代码并添加引导程序 3 的链接和脚本......

1.您可以添加引导程序 4 的链接/脚本，然后它就可以工作了：

这是脚本/链接：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

示例：

      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <div style="background-color: black;">
		    <nav class="navbar navbar-expand-md bg-dark navbar-dark">
			<div class="container">
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsenavbar">
					<span class="navbar-toggler-icon" style="background-color: black"></span>
				</button>
				<div class="collapse navbar-collapse text-center" id="collapsenavbar">
					<ul class="nav navbar-nav">
						<li class="nav-item">
							<a href="" class="nav-link">Home</a>
						</li>
						<li class="nav-item">
							<a href="" class="nav-link">The New Laws</a>
						</li>
						<li class="nav-item">
							<a href="" class="nav-link">Get Qualified</a>
						</li>
						<li class="nav-item">
							<a href="" class="nav-link">What Is Record Suspension</a>
						</li>
						<li class="nav-item">
							<a href="" class="nav-link">Why Do I Need A Waiver</a>
						</li>
					</ul>
	   			</div>
	   		</div>
	      	</nav>
	       </div>

2。您可以使用引导程序 3：https://www.w3schools.com/Bootstrap/bootstrap_navbar.asp

【讨论】：