我正在使用navbar类作为导航菜单。当我使用navbar-fixed-top类时，正文中的一些内容被隐藏在导航栏后面。有人能告诉我为什么会发生这种情况吗？
下面是我一直在做的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JanaSena Party</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style = "background-color: lightgrey;">
<div class = "navbar navbar-default navbar-fixed-top">
<div class = "container">
<div class = "navbar-header ">
<a href = "#" class = "navbar-brand pull-left">BRAND</a>
<button class = "navbar-toggle pull-right" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
</div>
<div class = "collapse navbar-collapse navHeaderCollapse pull-right">
<ul class = "nav navbar-nav">
<li>
<a href = "#">Link1</a>
</li>
<li>
<a href = "#"> Link2</a>
</li>
<li>
<a href="#" class = "active">Link3</a>
</li>
<li>
<a href="#">Link4</a>
</li>
<li>
<button class = "btn navbar-btn btn-danger dropdown-toggle" data-toggle = "dropdown">DropDown<span class = "caret"></span></button>
<ul class = "dropdown-menu">
<li>
<a href="#">Facebook</a>
</li>
<li>
<a href="#">Twitter</a>
</li>
<li>
<a href="#">Google+</a>
</li>
<li>
<a href="#">LinkedIn</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class = "row">
<div class="col-md-6 col-xs-10">
<form class = "form-group">
<label class = "control-label">Username</label>
<input class = "from-control" type = "text" placeholder = "Username">
<label class = "control-label">Password</label>
<input class = "form-control" type = "password" placeholder = "Password">
<label class = "control-label">Confirm Password</label>
<input class = "form-control" type = "password" placeholder = "Confirm Password">
<label class = "control-label">Email Address</label>
<input class = "form-control" type = "Email" placeholder = "harry@potter.com">
<label class = "control-label">Date of Birth</label>
<input class = "form-control" type = "Date" placeholder = "Date of birth(mm/dd/yyyy)">
<label class = "control-label"> What do you think of JSP </label>
<textarea rows = "3" class = "form-control" style = "resize: none;"></textarea>
</form>
</div>
</div>
</div>
<div class = "navbar navbar-default navbar-fixed-bottom">
<p class = "navbar-text">Hail Pawanism</p>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
2条答案
按热度按时间ma8fv8wu1#
只需在body标记的css实现中使用
padding-top: 70px;，就可以将应用程序的内容向下推送。发生这种情况是因为当你应用
navbar-fixed-top类时，它将导航栏的position定义为Fixed，每当我们在CSS中为元素使用固定定位时，该元素就会被移出布局流，所以当导航栏移出布局时，您的元素会从body的顶部开始。可以选中this link以更好地理解CSS定位
8wtpewkr2#
在最新版本的bootstrap v5.3中，可以在主体的div/tag中使用class=“pt-5”。