时间戳

首页 > 解决方案 > 在引导程序中创建一个居中的导航栏，该导航栏在有或没有滚动条的情况下保持在相同的位置

bootstrap-4 - 在引导程序中创建一个居中的导航栏，该导航栏在有或没有滚动条的情况下保持在相同的位置

问题描述

在我的 bootstrap 4.5 项目中，我真的需要一些专业知识:)

在 Blazor 中，我在一个名为 的单独组件中创建了导航栏菜单MainHeader，它仅包含一个标准导航栏，其中包含根据所有可用示例进行的基本设置。导航栏按预期位于中心。

<nav class="navbar navbar-expand-lg navbar-dark bg-customblue1">
    <div class="container" ">
        <a href="http://www.lindab.se" class="navbar-brand">
            <img src="../img/logo.svg" />
        </a>
        ...
    </div>
</div>

导航栏包含在一个布局文件中，如下所示：

<MainHeader />

<div class="container content">
    @Body
</div>

现在谈谈困扰我的事情；当显示的页面内容适合屏幕大小时，内容按预期放置在中心，菜单和页面内容都在下方。但是，当菜单下方的页面内容在高度方面太大时，会引入滚动条，这会使菜单和页面内容都向左“跳跃”一点，这不是很好看。

当然有一个可以理解的逻辑，但问题是，有没有人知道一个技巧如何让它一直处于同一个位置？

谢谢你的时间 ：）

/亨里克

标签： bootstrap-4scrollnavbarblazorpositioning

解决方案

我的布局之一与您的问题类似：

@inherits LayoutComponentBase
<div class="wrap">

    <main>

        <aside>
            <NavMenu/>
        </aside>

        <article>
            @Body
        </article>

    </main>

</div>

app.css

:root {
    --main-bg-color: orange;
}

html, body {
    height: 100%;
}

.wrap {
    height: 100vh;
    display: flex;
}

main {
    flex: 1;
    display: flex
}

aside, article {
    overflow-y: auto;
    padding: 2em
}

aside {
    max-width: 250px;
    background-color: var(--main-bg-color);
}

article {
    flex: 2;
}

@media (min-width: 768px) {
    aside {
        flex: 1;
    }
}

@media (max-width: 767.98px) {
    main {
        flex-direction: column;
    }

    aside {
        flex: none;
        max-width: unset;
        overflow-y: inherit;
    }
}

推荐阅读