我有两个导航栏(一个在另一个下)。我的目标是将两者都固定在顶部,所以我将两者都应用于(固定顶部)。
为了使另一个导航栏适合另一个导航栏,我使用了页边距顶部。我的问题是,此边距顶部没有响应,如果您增大或减小屏幕尺寸,导航栏将无法完美地位于另一个导航栏下面。
有没有一种方法可以正确地拟合它们或计算必要的保证金上限?
HTML
<nav class="navbar navbar-expand-md navbar-light bg-white MyNavBar fixed-top" >
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2" id="dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="btn"><img src="home.svg"></a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="btn"><img src=".logo-home.svg"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2" id="dual-collapse2">
<ul class="navbar-nav ml-auto">
<div class="row">
<li class="nav-item">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item" style="width: 57px;">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
</div>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-light bg-white fixed-top Mytoolbar" style="margin-top: 74px;">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse22" id="dual-collapse22">
<ul class="navbar-nav mr-auto" id="dual-collapse22">
<li class="nav-item folder_category">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#dual-collapse22">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav navbar-collapse collapse w-100 order-3" id="dual-collapse22">
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
</ul>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse22" id="dual-collapse22">
<ul class="navbar-nav ml-auto">
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item">
<a class="nav-link">
</a>
</li>
<li class="nav-item">
<a class="toggle-third nav-link">
<img src="ra.svg" >
</a>
</li>
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
</ul>
</div>
</nav>
答案 0 :(得分:1)
这应该有效:
div
div
类fixed-top
fixed-top
类navbar
(margin-top: 74px;
)的内联CSS 见下文:
.MyNavBar {
box-shadow: 0px 12px 17px rgba(188, 188, 203, 0.14);
border-bottom: 1px solid #BCBCCB;
z-index: 9999;
}
.MyNavBar img {
cursor: pointer;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="fixed-top">
<nav class="navbar navbar-expand-md navbar-light bg-white MyNavBar">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2" id="dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="btn"><img src="home.svg"></a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<a class="btn"><img src=".logo-home.svg"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse2" id="dual-collapse2">
<ul class="navbar-nav ml-auto">
<div class="row">
<li class="nav-item">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item" style="width: 57px;">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
</div>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-light bg-white Mytoolbar">
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse22" id="dual-collapse22">
<ul class="navbar-nav mr-auto" id="dual-collapse22">
<li class="nav-item folder_category">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
</ul>
</div>
<div class="mx-auto order-0">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#dual-collapse22">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="navbar-nav navbar-collapse collapse w-100 order-3" id="dual-collapse22">
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
</ul>
</div>
<div class="navbar-collapse collapse w-100 order-3 dual-collapse22" id="dual-collapse22">
<ul class="navbar-nav ml-auto">
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item">
<a class="nav-link">
</a>
</li>
<li class="nav-item">
<a class="toggle-third nav-link">
<img src="ra.svg">
</a>
</li>
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
<li class="nav-item btn-upload">
<a class="nav-link btn">sdfsdfsdfsdfsdfsdfsdfsdfsdfs</a>
</li>
</ul>
</div>
</nav>
</div>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>
<p>asdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddjioasdjasdiasjdiowjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjdhio</p>