我正在尝试使用Bulma的固定导航栏,在顶部覆盖10%,一个占80%的主要部分和一个在底部覆盖另外10%的导航栏。 导航栏具有图标和文本。 在不设置高度的情况下已经存在一些偏差,通过设置高度,偏差似乎稍微减小了,但是容器仍然不对齐。
<!DOCTYPE html>
<html class="" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body class="has-navbar-fixed-top has-navbar-fixed-bottom">
<header>
<nav class="navbar is-fixed-top message-header has-background-warning">
<a>
<span class="icon is-large"><i class="fas fa-users fa-3x"></i></span>
<span>Members</span>
</a>
<a>
<span class="icon is-large"><i class="far fa-images fa-3x"></i></span>
<span>Photos</span>
</a>
<a>
<span class="icon is-large"><i class="fas fa-map-marked-alt fa-3x"></i></span>
<span>Maps</span>
</a>
<a>
<span class="icon is-large"><i class="fas fa-calendar-alt fa-3x"> </i></span>
<span>Calendar</span>
</a>
</nav>
</header>
<section class="eightyvh has-background-primary">
<div class="container">Why is this text behind the navbar?</div>
</section>
<footer>
<nav class="navbar is-fixed-bottom message-header has-background-warning">
<a>
<span class="icon is-large"><i class="fas fa-users fa-3x"></i></span>
<span>Members</span>
</a>
<a>
<span class="icon is-large"><i class="far fa-images fa-3x"></i></span>
<span>Photos</span>
</a>
<a>
<span class="icon is-large"><i class="fas fa-map-marked-alt fa-3x"></i></span>
<span>Maps</span>
</a>
<a>
<span class="icon is-large"><i class="fas fa-calendar-alt fa-3x"> </i></span>
<span>Calendar</span>
</a>
</nav>
</footer>
</body>
</html>