导航栏之前的行在引导 html 中不可见

Question

我正在尝试在导航栏之前添加该行，但是添加该行后，它不可见，并且行被导航栏覆盖。如何在导航栏之前显示行

<header id="header">
<div class=row>
The text is not visible here
</div>
<nav class="navbar  navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark-header fixed-top" id="main-nav">
<div class="w-100 d-flex">
<a class="navbar-brand mx-md-auto" href="#">
<img src="img/logo.png" alt="Logo" height="80px" width="auto">
</a>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="container">
<img src="img/Logo.png" class="img-responsive" alt="" style="width:250px;">
<a class="navbar-brand" href="/">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" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Home/Privacy">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Home/Privacy">Our Project</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Home/Privacy">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>

Answer 1

<div class="text-light" style="position: fixed;">
The text is not visible here
</div>

您必须向该div 添加一个位置，因为它与该标头重叠。

Answer 2

类fixed-top被添加到nav element中，该将导航粘贴在顶部，并隐藏上述.row元素。

1. 如果不需要顶级固定导航，则可以从导航中删除fixed-top类
在
2. 导航中添加.row element，这将修复导航顶部的行