bootstrap导航栏崩溃图标的问题

时间:2018-06-18 00:35:01

标签: html css twitter-bootstrap bootstrap-4

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

代码是:

Invoke-Expression



enter code here




1 个答案:

答案 0 :(得分:0)

你使用nav的bootstrap 4代码并添加bootstrap 3的链接和脚本....

1。你可以添加bootstrap 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。你可以使用bootstrap 3:https://www.w3schools.com/Bootstrap/bootstrap_navbar.asp

相关问题