Question

我有这样的结构引导程序4，并在dist文件夹上使用koala-app作为scss / sass压缩

Blockquote
  BS4 ------------------------------------------------- ---------------文件夹
  index.html ----------------------------------------------- --------文件
  资产------------------------------------------------- -----------文件夹
  scss ------------------------------------------------- -------------文件夹
  _variable.scss ----------------------------------------------- -文件
  _global.scss ----------------------------------------------- ----文件
  main.scss ----------------------------------------------- -------文件
  js ------------------------------------------------- ------------------弗莱德
  main.js ----------------------------------------------- ------------文件
  dist ------------------------------------------------- ----------------文件夹
  供应商------------------------------------------------- -----------文件夹
  botstrap4.3.1 ----------------------------------------------- ----文件夹
  koala-config.json

我已经从（1）https://codepen.io/rss/pen/vIDKH/

我把自己的结构代码写成我的样本BS4 https://i.stack.imgur.com/XYzc9.jpg 并希望从这（2）https://bootsnipp.com/snippets/PbDb5中获得最佳样式，但它要在BS3（我的样本BS3 https://i.stack.imgur.com/icgi2.jpg）上使用。我尝试使用此（3）https://github.com/mladenplavsic/bootstrap-navbar-sidebar的其他解决方案，它也是BS3。我将这样的结构代码放在index.html BS4上

$(".toggle-icon").click(function() {
			$('#nav-container').toggleClass("pushed");
		  });

		body{
	background:#222;
	padding: 100px;
	font-size: 10px; /*increase me to scale toogle-icon*/
}

#nav-container{
	position: absolute;
	top: 25px;
	left: 0px;
	margin:1em;
}

/*toggle-icon*/
.toggle-icon {
	display: block;
	position: relative;
	width: 100%;
	margin: -2.2em auto 0 0.2em;
	-webkit-transition: margin 600ms;
	-moz-transition: margin 600ms;
	transition: margin 600ms;
	cursor: pointer;
}

.toggle-icon .bar {
	display: block;
	width: 3.8em;
	height: 0.2em;
	margin: 0.9em;
	border-right: 2.8em solid #fff;
	border-left: 0.6em solid #d6d6d6;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition-property: -webkit-transform, margin, border-right-color, box-shadow;
	-moz-transition-property: -moz-transform, margin, border-right-color, box-shadow;
	transition-property: transform, margin, border-right-color, box-shadow;
	-webkit-transition-duration: 600ms;
	-moz-transition-duration: 600ms;
	transition-duration: 600ms;
}
	.toggle-icon .bar:nth-of-type(1) {
		-webkit-transition: opacity 300ms;
		-moz-transition: opacity 300ms;
		transition: opacity 300ms;
	}
	.toggle-icon .bar:nth-of-type(2) {
		-webkit-transform: rotate(-180deg);
		-moz-transform: rotate(-180deg);
		-ms-transform: rotate(-180deg);
		-o-transform: rotate(-180deg);
		transform: rotate(-180deg);
	}

/*pushed*/
.pushed .toggle-icon {
	margin: -3.2em 0 0 0.7em;
}

	.pushed .bar:nth-of-type(1) {
		opacity: 0;
	}

	.pushed .bar:nth-of-type(2) {
		margin-left: 1.4em;
		-webkit-transform: rotate(-137deg) translateY(-1.5em);
		-moz-transform: rotate(-137deg) translateY(-1.5em);
		-ms-transform: rotate(-137deg) translateY(-1.5em);
		-o-transform: rotate(-137deg) translateY(-1.5em);
		transform: rotate(-137deg) translateY(-1.5em);
	}

	.pushed .bar:nth-of-type(3) {
		margin-left: 0.5em;
		-webkit-transform: rotate(-42deg);
		-moz-transform: rotate(-42deg);
		-ms-transform: rotate(-42deg);
		-o-transform: rotate(-42deg);
		transform: rotate(-42deg);
	}


.pushed .toggle-icon:hover .bar:nth-of-type(2) {
	border-right-color: #e9b8b9;
	box-shadow: 0.4em 0 0.6em 0.1em rgba(205,40,44,0.75);
}
.pushed .toggle-icon:hover .bar:nth-of-type(3) {
	border-right-color: #ddf1da;
	box-shadow: 0.4em 0 0.6em 0.1em rgba(83,228,68,0.65);
}

.site-header {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
			width: 125px;
			height: 100vh;
			padding: 0 15px;
			box-shadow: 6px 0 12px rgba(0,0,0,.05);
			background: rgb(8, 4, 4);
		}

<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</head>
<body>
<header class="site-header">
				<!-- menu -->
				<div id="nav-container">
							<div class="toggle-icon">
							  <span class="bar"></span>
							  <span class="bar"></span>
							  <span class="bar"></span>
							</div><!-- /toggle-icon -->
						  </div><!-- /nav-container -->
              <!-- i need help from here to having dropwdown like my sample (2) -->
				<!-- End Menu -->
        <!-- Logo -->
				
				<!-- End Logo -->
			</header>
</body>
</html>

我的问题是如何使用humburger（1）构建侧边栏以从（2）中获得最佳布局，并使其具有自举程序4的编号（3）解决方案的响应能力。

Bootstrap 4下拉式显示汉堡菜单响应

0 个答案: