Question

我试图弄清楚布尔玛的固定导航栏在顶部占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>

Answer 1

HTML

<section class="section">
 <nav class="navbar is-fixed-top" role="navigation">
 ...
 </nav>
</section>

如果您使用 is-fixed-top，请将 nav 括在 section 中

Answer 2

如果您不希望导航栏与您的内容重叠，您还需要在元素中添加类 .has-navbar-fixed-top。

固定导航栏的文档：https://bulma.io/documentation/components/navbar/#fixed-navbar

Answer 3

您已将这些类设置为 has-navbar-fixed-top 和 has-navbar-fixed-bottom 。这将使您的身体顶部和底部的填充为 3.25rem 。导航栏的高度因其内容而超过3.25rem

解决方案： 1.将导航栏的高度减小到不大于3.25rem 要么 2.增加顶部和底部填充

Answer 4

向正文添加顶部填充以降低主要内容。

body{
    padding-top: 60px;
}

布尔玛导航栏重叠主要部分

4 个答案: