html - 标头固定顶部不适用于部分引导程序 4
问题描述
我已经header
使用top-bar
并nav
使用了 bootstrap 4。
HTML:
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<header class="fixed-top">
<div class="top-bar">
<div class="container">
top bar
</div>
</div>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>
<section id="intro">
<div class="container">
<div class="jumbotron">
<div class="container">
<h2>Test</h2>
<h1>Lorem Ipsum</h1>
<h4>Lorem Ipsum</h4>
</div>
</div>
</div>
</section>
</body>
我在上面添加fixed-top
类header
,Now In actionheader
结束了section
,section
之后不显示header
。阻止section
后如何显示?!header
演示在这里
解决方案
推荐阅读
- node.js - 为 webpack 重新安装 Node js 的问题
- html - ng-click 上未填充 AngularJS 变量参考
- azure - 什么是天蓝色角色?
- vba - For循环覆盖数组内的数据
- python - Django 中的自定义上传处理程序
- ios - .Clipped() 不适用于 Pickers SwiftUI
- bit-manipulation - 当按位与 & 运算大于或等于按位异或 ^ 运算时?
- c# - 使用 caliburn micro 和 fluent Validation 通过按钮进行验证
- azure - IntelliJ IDEA azure ARM 模板智能感知
- python - 如何在 pytorch 中为 ppc64le 架构安装 torchmeta?