Bulma导航栏重叠主要区块问题

Question

Bulma导航栏重叠主要区块问题

8

我正在尝试使用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>

- Sasha

如果您的“header”是“fixed”，则需要通过为其提供“margin-top”来将其后面的文本向下移动。 - Abdul Basit

4个回答

4

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

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

- gaelleog

谢谢！这也解决了我的Buefy问题，在vue路由更改后，导航栏下方的内容被放置得更高。 - MartijnvdB

更正：这并没有解决我的Buefy问题。手动设置b-navbar class="is-fixed-top"确实解决了这个问题。 - MartijnvdB

3

你已经设置了这些类has-navbar-fixed-top和has-navbar-fixed-bottom，这将在页面顶部和底部给你的标签添加一个3.25rem的内边距。由于内容，你的导航栏的高度超过了3.25rem。解决方案： 1. 将你的导航栏高度减小到不大于3.25rem 或者 2. 增加顶部和底部内边距

- Manu Joseph

1

有一个Sass变量可以处理这个问题：“$navbar-height”。 - Yannic Hamann

0

在主体上添加顶部填充，以使主要内容向下移动。

body{
    padding-top: 60px;
}

- Tazim Rahbar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Selpano · Accepted Answer

HTML

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

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