时间戳

首页 > 解决方案 > 如何在引导程序 4 中创建固定标头

html - 如何在引导程序 4 中创建固定标头

问题描述

我正在尝试将标题固定在顶部而不是固定顶部导航。滚动正文部分时，如何使标题保持固定。“品牌”部分和导航栏应保持固定。这是我的代码。现在，当我滚动正文部分时，菜单会固定，但会滚动品牌部分。我怎样才能保持部分部分也固定。我正在使用引导程序 4

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<header id="header">
        <section class="brand">
            <div class="row bg-primary text-light pt-4">
                <div class="col-md-6 pl-5">
                    <p> sjkddjfhsdjdhfsddjkfh weuirrhweiueihruiwe weuirhuiweihruh wuierhiuweh rhweuirui sjkdfkhsdjkfh</p>
                </div>
            </div>
        </section>

        <nav class="navbar  navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark-header fixed-top" id="main-nav"
            style="margin-top: 60px;">

            <div class="container">
                <img src="img/Logo.png" class="img-responsive" alt="" style="width:250px;">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MyCompany</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"
                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item active">
                            <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">About Us</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">Our Project</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Privacy">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

标签： html

解决方案

将元素从边到边定位在视口的顶部。确保您了解项目中固定位置的影响；您可能需要添加额外的 CSS。

<div class="fixed-top">...</div>

这也可能对您有所帮助： https ://getbootstrap.com/docs/4.0/utilities/position/

推荐阅读