Question

调整大小时内容（.intro-header）与导航栏重叠。我已经将margin-bottom添加到id =容器（导航栏所在的位置），但这似乎不起作用。

理想的情况是，当我点击切换菜单时，下拉菜单也不会超过内容。

我的内容应居中我使用transform：translate，position fixed。这是我的代码`

html body {
	height: 100%;
	
}


hr {
  border: none;
  background-color: #202A25;
  height: 2px;
  margin-top: 0em;
}


#container {
	margin-bottom:100px;
}

.intro-header {

	position: fixed;
	top: 50%;
	left: 50%;

	/* Center always */
	transform: translate(-50%, -100%);
}

.line2 {
	position: relative;
	top: 10px;
	height: 3px;
}

h1 {
font-family: 'Mirador';
font-weight: bold;
text-align: center;
margin: auto;
}

.container {
	margin: auto;
	width: 100%;
	height: 100%;

}

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
		<!--css style-->
		<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<hr>
		<div id="container">
			<nav class="navbar navbar-expand-md navbar-light fixed-top">
				<a class="navbar-brand d-none d-md-block" href="#"><img src=""></a>
				<a class="navbar-brand navbar-text d-none-xs-block d d-sm-block d-md-none d-lg-none d-xl-none" href="#">R a n d o m o o d</a>

				
				<!--button when collapsed-->
				<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>	
				</button>
				<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
					<ul class="navbar-nav ml-auto">
						<li class="nav-item">
		            		<a class="nav-link" href="#">Book</a>
		          		</li>
		          		<li class="nav-item">
		           			 <a class="nav-link" href="#">About</a>
		          		</li>
		          		<li class="nav-item">
		            		<a class="nav-link" href="#">Contact</a>
		          		</li>
					</ul>	
				</div>	
				
			</nav>
			
		</div>
		<div class="intro-header">
				<div class="container">
					<div class="row">
						<div class="col-lg-12">
							<h1>Need a Graphic Designer?</h1>
							<!--line-->
							<hr class="line2" align="center" width="50%">
						</div>	
						
					</div>
				</div>
		</div>
    
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</body>

`

保存我的内容的div与导航栏重叠，并在调整Bootstrap 4的大小时消失

0 个答案: